我們很高興宣布推出「發揮捲動驅動動畫的力量」,這是一門 10 集的影片課程,將教您如何使用 CSS 或 JavaScript 製作捲動驅動動畫。
你可以在 YouTube 上觀看這部影集。第一集內容已嵌入此處。
捲動驅動動畫?
透過捲動驅動動畫,您可以使用現有的 CSS 或 WAAPI 動畫,並在捲動時播放動畫。因此,捲動驅動動畫會繼承這些 API 帶來的所有優點。這包括硬體加速的捲動驅動動畫,在主執行緒遭到封鎖時,不會出現卡頓現象。
從 Chrome 115 開始,Chrome 就支援捲動驅動動畫,是漸進式增強功能的最佳候選項目。
劇集
本課程包含 10 集,並分為兩個主要部分:說明構成捲動驅動動畫的核心概念,以及幾個實際應用。
- 第 1 集:簡介。
- 第 2 集:核心概念:
scroll()
和ScrollTimeline
。 - 第 3 集:核心概念:
view()
和ViewTimeline
。 - 第 4 集:核心概念:解說時間軸範圍。
- 第 5 集:核心概念:時間軸查詢和命名時間軸。
- 第 6 集:實際應用:在捲動容器中新增捲動陰影。
- 第 7 集:實際應用:以不同方向為元素製作動畫。
- 第 8 集:實際應用:在捲動時為 3D 模型和其他元素設定動畫。
- 第 9 集:實際應用:捲動速度偵測。
- Episode 10: Outro。
建議依序觀看各集內容,因為這些內容會延續先前各集的示範和技巧。每集節目中展示的示範和工具皆可在線上取得,並在說明中提供連結。