如何僅在頁面滾動時進入視口時才對元素進行動畫處理？

在頁面滾動的視口中為元素添加動畫

在包含多個動畫元素的網頁中，控制這些動畫何時開始可能會很困難。為了實現平滑的滾動動畫，我們需要一種方法，僅當它們各自的元素進入視圖時才觸發它們。以下是使用 IntersectionObserver API 實現此目的的方法。

使用 IntersectionObserver API

IntersectionObserver API 監視與視口或指定父元素相關的元素的可見性。當元素變得可見時，我們可以使用它來切換 CSS 動畫。

程式碼片段

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach((el) => {
  Obs.observe(el, obsOptions);
});

CSS 動畫範例

以下是如何將動畫應用於元素的範例檢視中的內容：

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

結論

透過利用IntersectionObserver API，我們現在可以控制動畫的時間，確保動畫在相應元素在視口中可見時播放。這種方法在用戶滾動瀏覽您的網頁時為他們提供了無縫且引人入勝的體驗。

以上是如何僅在頁面滾動時進入視口時才對元素進行動畫處理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！