היכרות עם enter-view.js ואיך להטמיע אותו ב WordPress

Enter-View היא ספרייה חופשית מבוססת js שמזהה שאלמנט מסויים מופיע ב Viewport של המסך. וברגע שהאלמנט מופיע, היא מוסיפה 2 קלאסים:

  • הקלאס הראשון הוא הקלאס שאותו נקבע לבד, בדרך כלל נרצה לכתוב עוד CSS לקאלס הזה, בעיקר של אנימציה וכו'.
  • הקלאס השני הוא entered שהוא מתווסף לאלמנט שיופיע על המסך

מה שצריך כדי להתחיל לעבוד איתו ולהטמיע אותו לוורדפרס זה פשוט להוסיף את הקובץ enter-view.min.js
(כמובן לתבנית בת) ע"י הוספת הקוד ל functions.php 

//adding enter-view.js file
function adding_enter_view() {
	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/enter-view.min.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'adding_enter_view' );

ולהוסיף בתחתית העמוד את הסקריפט הבא:

enterView({
	selector: '.class-name',
	enter: function(el) {
		el.classList.add('entered');
	}
});

או עם offset (כלומר שהקלאס יתקבל בגובה מסויים מתחתית המסך) אז:

enterView({
	selector: '.class-name',
	enter: function(el) {
		el.classList.add('entered');
	},
	offset: 0.5, // enter at middle of viewport
	once: true, // trigger just once
});

ע"י הוספת הקוד הבא: 

'"