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.

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()
  }
})

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');

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!