如何使用基本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中文網其他相關文章！