網(wǎng)頁(yè)動(dòng)畫(huà)的巧妙運(yùn)用能提升用戶體驗(yàn)，增強(qiáng)網(wǎng)站吸引力。但如果動(dòng)畫(huà)元素位於頁(yè)面較下方，用戶可能錯(cuò)過(guò)。本文將介紹如何使用原生JavaScript實(shí)現(xiàn)滾動(dòng)觸發(fā)動(dòng)畫(huà)，讓動(dòng)畫(huà)在用戶滾動(dòng)到特定元素時(shí)才開(kāi)始播放，避免資源浪費(fèi)，提升用戶體驗(yàn)。

我們無(wú)需借助第三方庫(kù)，只需少量原生JavaScript代碼即可實(shí)現(xiàn)。核心在於使用Intersection Observer API ，它能高效地檢測(cè)目標(biāo)元素是否進(jìn)入視窗。

實(shí)現(xiàn)滾動(dòng)觸發(fā)事件

我們的方法包括：

1. 創(chuàng)建scrollTrigger函數(shù)，用於處理特定元素的滾動(dòng)觸發(fā)事件。
2. 當(dāng)元素進(jìn)入視窗時(shí)，添加.active類。
3. 使用CSS動(dòng)畫(huà).active類。

此外，我們還需支持自定義回調(diào)函數(shù)，以便在元素可見(jiàn)時(shí)執(zhí)行特定操作，例如：

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

最後，我們還將處理舊版瀏覽器對(duì)Intersection Observer API的不支持。

Intersection Observer API

Intersection Observer API 允許我們異步觀察目標(biāo)元素與視窗的交叉狀態(tài)，比監(jiān)聽(tīng)滾動(dòng)事件更高效。

構(gòu)建滾動(dòng)觸發(fā)函數(shù)

首先，創(chuàng)建scrollTrigger函數(shù)，它接收選擇器作為參數(shù)：

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

接下來(lái)，創(chuàng)建addObserver函數(shù)，使用Intersection Observer來(lái)監(jiān)聽(tīng)元素：

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

上述代碼會(huì)在元素部分可見(jiàn)時(shí)添加.active類。為了更精細(xì)地控制，我們可以使用Intersection Observer的options參數(shù)：

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

現(xiàn)在，我們實(shí)現(xiàn)了前兩點(diǎn)目標(biāo)。接下來(lái)，添加回調(diào)函數(shù)支持：

 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 = '任務(wù)完成！ ';
    }, 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 = '任務(wù)完成！ ';
    }, 1000);
  }
});

通過(guò)以上步驟，我們成功實(shí)現(xiàn)了滾動(dòng)觸發(fā)動(dòng)畫(huà)效果，並兼顧了瀏覽器兼容性。 希望本文能幫助您提升網(wǎng)站的用戶體驗(yàn)。

以上是如何使用基本JavaScript製作捲軸觸發(fā)的動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！