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

網址

2023-08-13 09:26:42

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

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

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

這個網站匯集了許多有趣的滾動捲動方式，讓使用者可以透過捲動來改變元件的狀態，以增強資訊傳遞並提升使用者體驗。例如，第一個 "reading progress indicator" 是一個常見的設計，它能夠顯示你目前閱讀到哪個部分。還有 "Image Reveal"，當進入視窗時展開影片等等。這些設計方式能夠有效地利用捲動的狀態來呈現不同的元素效果。

網站不僅提供了這些設計方式的範例，還附上了相關的程式碼，非常貼心。這絕對值得仔細研究，尤其是對於想要提升網站互動性和使用者體驗的設計師和開發者來說。

使用 Midjourney + Panolens.js 製作 360 度環景圖與互動效果 Makeayo：最簡單且輕鬆能透過 AI 生成高品質圖像的工具