IntersectionObserver 如何增強頁面滾動的 CSS3 動畫？

使用IntersectionObserver API 在頁面滾動上觸發CSS3 動畫

將CSS3 動畫合併到網頁中時，使用者可能會遇到動畫過早觸發或在頁面中不可見的問題。視口。為了解決這個問題，IntersectionObserver API 提供了一個解決方案，允許元素僅在進入使用者視窗時進行動畫處理。

IntersectionObserver API

IntersectionObserver API 使開發人員能夠觀察交集的變化具有祖先元素或文件視口的目標元素。此 API 提供了當目標元素可見或不可見時呼叫的回呼函數。

實作

實作此功能：

1. 使用回呼函數建立IntersectionObserver 物件inViewport 根據元素的可見性切換元素上的類別：

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const observer = new IntersectionObserver(inViewport);

2. 根據需要配置相交觀察器選項（例如root、rootMargin、閾值）。
3. 使用交集觀察器觀察具有 data-inviewport 屬性的目標元素：

document.querySelectorAll('[data-inviewport]').forEach(el => {
  observer.observe(el, obsOptions);
});

4. 使用類別選擇器實現 CSS動畫：

[data-inviewport="fade-in"] {
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-in"].is-inViewport {
  opacity: 1;
}

透過遵循這些步驟，可以根據元素在視窗中的可見性動態觸發動畫，在頁面滾動期間提供更直觀、更有吸引力的用戶體驗。

以上是IntersectionObserver 如何增強頁面滾動的 CSS3 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！