隆重推出 ";呈現「捲動式動畫」的強大威力

我們很高興宣布推出「發揮捲動驅動動畫的力量」,這是一門 10 集的影片課程,將教您如何使用 CSS 或 JavaScript 製作捲動驅動動畫。

你可以在 YouTube 上觀看這部影集。第一集內容已嵌入此處。

捲動驅動動畫?

透過捲動驅動動畫,您可以使用現有的 CSS 或 WAAPI 動畫,並在捲動時播放動畫。因此,捲動驅動動畫會繼承這些 API 帶來的所有優點。這包括硬體加速的捲動驅動動畫,在主執行緒遭到封鎖時,不會出現卡頓現象。

從 Chrome 115 開始,Chrome 就支援捲動驅動動畫,是漸進式增強功能的最佳候選項目。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

如要進一步瞭解捲動驅動動畫,請觀看影片系列閱讀說明文件

劇集

本課程包含 10 集,並分為兩個主要部分:說明構成捲動驅動動畫的核心概念,以及幾個實際應用。

  1. 第 1 集:簡介
  2. 第 2 集:核心概念:scroll()ScrollTimeline
  3. 第 3 集:核心概念:view()ViewTimeline
  4. 第 4 集:核心概念:解說時間軸範圍
  5. 第 5 集:核心概念:時間軸查詢和命名時間軸
  6. 第 6 集:實際應用:在捲動容器中新增捲動陰影
  7. 第 7 集:實際應用:以不同方向為元素製作動畫
  8. 第 8 集:實際應用:在捲動時為 3D 模型和其他元素設定動畫
  9. 第 9 集:實際應用:捲動速度偵測
  10. Episode 10: Outro

建議依序觀看各集內容,因為這些內容會延續先前各集的示範和技巧。每集節目中展示的示範和工具皆可在線上取得,並在說明中提供連結。

其他資源