Home > Web Front-end > CSS Tutorial > How to Make a Scroll-Triggered Animation With Basic JavaScript

How to Make a Scroll-Triggered Animation With Basic JavaScript

William Shakespeare
Release: 2025-03-15 11:04:10
Original
520 people have browsed it

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.

How to Make a Scroll-Triggered Animation With Basic JavaScript

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.

Implement scroll trigger events

Our approach includes:

  1. Create scrollTrigger function to handle scroll trigger events for specific elements.
  2. When the element enters the window, add the .active class.
  3. Use CSS .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()
  }
})
Copy after login

Finally, we will also deal with the non-support of the Intersection Observer API by older browsers.

Intersection Observer API

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.

Build a scroll trigger function

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');
Copy after login

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');
Copy after login

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'
});
Copy after login

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);
  }
});
Copy after login

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);
  }
});
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template