1// http://pavlyukpetr.github.io/motion-css//documentation.html 2// https://api.jquery.com/scroll/ 3// https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event 4// https://cssanimation.rocks/scroll-animations/ 5jQuery(window).scroll(function () { 6 jQuery('[data-cs-animate]').each(function () { 7 8 // Position of the element 9 const elPosition = jQuery(this).offset().top; 10 // Height of the element 11 const elHeight = jQuery(this).height(); 12 // Top of the window 13 const windowTop = jQuery(window).scrollTop(); 14 // Height of the window 15 const windowHeight = jQuery(window).height(); 16 17 18 // adds the class when the element is fully in the visible area of the window 19 if (elPosition < windowTop + windowHeight - elHeight) { 20 jQuery(this).addClass("animation fade-in"); 21 } 22 // removes the class when the element is not visible in the window 23 if (elPosition > windowTop + windowHeight) { 24 jQuery(this).removeClass("animation fade-in"); 25 } 26 // removes the class when the element is not visible in the window 27 if (elPosition + elHeight < windowTop) { 28 jQuery(this).removeClass("animation fade-in"); 29 } 30 }); 31}); 32 33 34// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 35const callback = function(entries) { 36 entries.forEach(entry => { 37 entry.target.classList.toggle("is-visible"); 38 }); 39}; 40 41let options = { 42 root: document.querySelector('#scrollArea'), 43 rootMargin: '0px', 44 threshold: 1.0 45} 46const observer = new IntersectionObserver(callback, options); 47 48const targets = document.querySelectorAll(".show-on-scroll"); 49targets.forEach(function(target) { 50 observer.observe(target); 51}); 52 53 54