The clever use of web animation can enhance user experience and enhance website appeal. But if the animation element is located below the page, the user may miss it. This article will introduce how to use native JavaScript to implement scroll-triggered animations, so that the animation will only start playing when the user scrolls to a specific element, avoiding waste of resources and improving the user experience.
We do not need to rely on third-party libraries, we can achieve it with just a small amount of native JavaScript code. The core lies in using the Intersection Observer API , which can efficiently detect whether the target element enters the window.
Our approach includes:
scrollTrigger
function to handle scroll trigger events for specific elements..active
class..active
class.In addition, we need to support custom callback functions to perform specific actions when elements are visible, for example:
scrollTrigger('.loader', { cb: function(el) { el.innerText = 'Loading...' loadContent() } })
Finally, we will also deal with the non-support of the Intersection Observer API by older browsers.
The Intersection Observer API allows us to asynchronously observe the intersection state of the target element and the window, which is more efficient than listening for scrolling events.
First, create a scrollTrigger
function, which receives the selector as a parameter:
function scrollTrigger(selector) { let els = document.querySelectorAll(selector); els = Array.from(els); els.forEach(el => { addObserver(el); }); } // Use example scrollTrigger('.scroll-reveal');
Next, create the addObserver
function and use Intersection Observer to listen for elements:
function scrollTrigger(selector){ let els = document.querySelectorAll(selector); els = Array.from(els); els.forEach(el => { addObserver(el); }); } function addObserver(el){ let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('active'); observer.unobserve(entry.target); } }); }); observer.observe(el); } // Use example scrollTrigger('.scroll-reveal');
The above code will add .active
classes when the element part is visible. For more fine control, we can use options
parameter of Intersection Observer:
function scrollTrigger(selector, options = {}) { let els = document.querySelectorAll(selector); els = Array.from(els); els.forEach(el => { addObserver(el, options); }); } function addObserver(el, options) { let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('active'); observer.unobserve(entry.target); } }); }, options); observer.observe(el); } // Use example scrollTrigger('.scroll-reveal', { rootMargin: '-200px' });
Now, we have achieved the first two goals. Next, add callback function support:
function scrollTrigger(selector, options = {}) { let els = document.querySelectorAll(selector); els = Array.from(els); els.forEach(el => { addObserver(el, options); }); } function addObserver(el, options){ let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting){ if(options.cb) { options.cb(el); } else{ entry.target.classList.add('active'); } observer.unobserve(entry.target); } }); }, options); observer.observe(el); } // Use example scrollTrigger('.loader', { rootMargin: '-200px', cb: function(el){ el.innerText = 'Loading...'; setTimeout(() => { el.innerText = 'Task completed! '; }, 1000); } });
Finally, deal with legacy browser compatibility:
function scrollTrigger(selector, options = {}) { let els = document.querySelectorAll(selector); els = Array.from(els); els.forEach(el => { addObserver(el, options); }); } function addObserver(el, options) { if(!('IntersectionObserver' in window)) { if(options.cb){ options.cb(el); } else{ el.classList.add('active'); } return; } let observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { if(options.cb) { options.cb(el); } else{ entry.target.classList.add('active'); } observer.unobserve(entry.target); } }); }, options); observer.observe(el); } // Use example scrollTrigger('.intro-text'); scrollTrigger('.scroll-reveal', { rootMargin: '-200px', }); scrollTrigger('.loader', { rootMargin: '-200px', cb: function(el){ el.innerText = 'Loading...'; setTimeout(() => { el.innerText = 'Task completed! '; }, 1000); } });
Through the above steps, we successfully achieved scroll-triggered animation effect and took into account browser compatibility. I hope this article can help you improve the user experience of your website.
The above is the detailed content of How to Make a Scroll-Triggered Animation With Basic JavaScript. For more information, please follow other related articles on the PHP Chinese website!