Scroll-driven Animations：收錄許多網頁捲動時的特效實踐方法

滾動驅動的動畫在網頁上是一個常見的用戶體驗模式。這些動畫與滾動容器的滾動位置相關聯。這意味著當你向上或向下滾動時，相關聯的動畫會根據直接響應向前或向後滑動。想像一下有趣的效果，比如視差背景圖像或隨著滾動而移動的閱讀指示器。類似的滾動驅動動畫是一種與元素在其滾動容器內的位置相關聯的動畫。例如，元素可以在進入視野時淡入。

實現這些效果的傳統方法是在主線程上響應滾動事件。這使得創建與滾動同步的高效滾動驅動動畫變得不可能或非常困難。多虧了「滾動驅動動畫」規範，您現在可以使用新的API和概念，這些API和概念使得聲明式的滾動驅動動畫可以與現有的Web動畫API（WAAPI）和CSS動畫API相結合。

通過將滾動驅動的動畫與這兩個現有的API整合，滾動驅動的動畫可以從這些API帶來的所有優勢中受益。這包括能夠使這些動畫在主線程之外運行。是的，你沒有看錯：現在你可以通過滾動驅動，使用幾行額外的代碼在主線程之外運行流暢的動畫。