אנימציית כניסה עדינה מהצדדים לאלמנט בעמוד תוך כדי גלילה.
האנימציה מגיעה מצד שמאל, ניתן לעדכן גם לימין
על ידי שינוי השורה הזו
transform: translate3d(-100px, 0, 0);
לזו:
transform: translate3d(100px, 0, 0);
יש לשים לאלמנט הרצוי את הקלאס toAnimate .
קוד ה-CSS:
.toAnimate {
opacity: 0;
transition-property: opacity, transform;
transform: translate3d(-100px, 0, 0); /* לכניסה מצד שמאל */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 1.5s;
}
.toAnimate.show {
opacity: 1;
transform: none;
}
קוד הJS:
document.addEventListener("DOMContentLoaded", function(event) {
function checkVisibility() {
jQuery(".toAnimate").each(function() {
let topOfElement = jQuery(this).offset().top;
let bottomOfElement = topOfElement + jQuery(this).outerHeight();
let bottomOfScreen = jQuery(window).scrollTop() + jQuery(window).innerHeight();
let topOfScreen = jQuery(window).scrollTop();
let offset = 50;
if (window.matchMedia("only screen and (max-width: 767px)").matches) {
offset = 0;
}
if ((bottomOfScreen > topOfElement + offset) && (topOfScreen < bottomOfElement)) {
jQuery(this).addClass('show');
} else {
jQuery(this).removeClass('show');
}
});
}
jQuery(window).on('scroll', checkVisibility);
checkVisibility(); // הפעל את הפונקציה גם בעת הטעינה
});
והנה התוצאה:
בהצלחה!