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

Bramus

我們很榮幸推出「釋放捲軸驅動動畫的力量」影片課程，這套課程共分為 10 個部分，將全面介紹如何使用 CSS 或 JavaScript 建立捲軸驅動動畫。

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

捲動驅動動畫？

有了捲動驅動動畫，您就能採用現有的 CSS 或 WAAPI 動畫，並在捲動時產生動畫效果。因此，捲動驅動動畫會繼承這些 API 的所有優點。這包括硬體加速的捲動驅動動畫，主執行緒遭到封鎖時不會發生抖動。

Chrome 115 以上版本提供捲動驅動動畫，非常適合用於漸進式強化。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

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. 第 10 集：結尾。

建議依序觀看集數，因為後續集數會以先前集數介紹的示範和技術為基礎。每集節目中展示的試用版和工具都可在線上取得，說明中也會提供連結。

其他資源