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

Bramus

我們很高興宣布推出「發揮捲動驅動動畫的力量」，這是一門 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。

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

其他資源