頁面滾動時元素進入視口時如何觸發CSS動畫？

頁面滾動期間在視窗中可見的元素的動畫

在網頁上使用CSS 動畫時，經常會遇到所有動畫同時播放的情況，從而遮蓋了那些動畫底部。為了解決這個問題，我們將探索使用 IntersectionObserver API 的解決方案。

IntersectionObserver API

IntersectionObserver API 讓開發人員監控元素與它的父容器或視窗。當某個元素進入視圖時，它會觸發一個可用於啟動操作的事件。

範例實作

下面是一個在以下情況觸發CSS 類別切換的範例：元素在視口中變得可見：

const inViewport = (entries,observer) =>; {
條目.forEach(entry =>{

});
};

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

//將觀察者附加到每個[data-inviewport]元素：
文檔.querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions );
});

在上面的例子中，所有帶有[data-inviewport]屬性的元素都會被監聽。當元素處於視圖中時，會新增 is-inViewport 類，並觸發下面 CSS 中定義的動畫。

<br>[data-inviewport="scale-in"] { <br> 轉換：2s;<br> 轉換：scale(0.1);<br>}<br>[data -inviewport="scale-in"].is-inViewport { <br> 變換：scale(1) ;}<p><br>[data-inviewport="fade-rotate"] { <br> 過渡: 2s;<br> 不透明度: 0;<br>}<br>[data-inviewport=" fade-rotate"].is-inViewport { <br> 變換：旋轉(180deg);<br> opacity: 11 ;<br>}</p>

此解決方案確保動畫僅當元素在滾動過程中變得可見時才播放，從而改善用戶體驗並創建更具視覺吸引力的網頁。

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