如何使用基本JavaScript制作卷轴触发的动画

网页动画的巧妙运用能提升用户体验，增强网站吸引力。但如果动画元素位于页面较下方，用户可能错过。本文将介绍如何使用原生JavaScript实现滚动触发动画，让动画在用户滚动到特定元素时才开始播放，避免资源浪费，提升用户体验。

我们无需借助第三方库，只需少量原生JavaScript代码即可实现。核心在于使用Intersection Observer API，它能高效地检测目标元素是否进入视窗。

实现滚动触发事件

我们的方法包括：

1. 创建scrollTrigger函数，用于处理特定元素的滚动触发事件。
2. 当元素进入视窗时，添加.active类。
3. 使用CSS动画.active类。

此外，我们还需支持自定义回调函数，以便在元素可见时执行特定操作，例如：

scrollTrigger('.loader', {
  cb: function(el) {
    el.innerText = '加载中...'
    loadContent()
  }
})

最后，我们还将处理旧版浏览器对Intersection Observer API的不支持。

Intersection Observer API

Intersection Observer API 允许我们异步观察目标元素与视窗的交叉状态，比监听滚动事件更高效。

构建滚动触发函数

首先，创建scrollTrigger函数，它接收选择器作为参数：

function scrollTrigger(selector) {
  let els = document.querySelectorAll(selector);
  els = Array.from(els);
  els.forEach(el => {
    addObserver(el);
  });
}
// 使用示例
scrollTrigger('.scroll-reveal');

接下来，创建addObserver函数，使用Intersection Observer来监听元素：

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);
}
// 使用示例
scrollTrigger('.scroll-reveal');

上述代码会在元素部分可见时添加.active类。为了更精细地控制，我们可以使用Intersection Observer的options参数：

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);
}
// 使用示例
scrollTrigger('.scroll-reveal', {
  rootMargin: '-200px'
});

现在，我们实现了前两点目标。接下来，添加回调函数支持：

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);
}
// 使用示例
scrollTrigger('.loader', {
  rootMargin: '-200px',
  cb: function(el){
    el.innerText = '加载中...';
    setTimeout(() => {
      el.innerText = '任务完成！';
    }, 1000);
  }
});

最后，处理旧版浏览器兼容性：

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);
}
// 使用示例
scrollTrigger('.intro-text');
scrollTrigger('.scroll-reveal', {
  rootMargin: '-200px',
});
scrollTrigger('.loader', {
  rootMargin: '-200px',
  cb: function(el){
    el.innerText = '加载中...';
    setTimeout(() => {
      el.innerText = '任务完成！';
    }, 1000);
  }
});

通过以上步骤，我们成功实现了滚动触发动画效果，并兼顾了浏览器兼容性。 希望本文能帮助您提升网站的用户体验。

以上是如何使用基本JavaScript制作卷轴触发的动画的详细内容。更多信息请关注PHP中文网其他相关文章！