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

Bramus

我們很高興宣布推出「釋放捲動驅動動畫的力量」，這是一款包含 10 部影片的課程，全面介紹如何使用 CSS 或 JavaScript 進行捲動式動畫。

你可以前往 YouTube 觀看系列影片。這裡嵌入了第一集。

捲動式動畫？

您可以利用捲動式動畫，擷取現有的 CSS 或 WAAPI 動畫，並在使用者捲動畫面時為動畫製作動畫效果。因此，捲動式動畫會繼承這些 API 帶來的所有優勢。這包括硬體加速的捲動驅動動畫，在主執行緒遭封鎖時不會受到資源浪費。

Chrome 第 115 版支援捲動式動畫功能，非常適合採用漸進式強化。

瀏覽器支援

  • 115
  • 115
  • x

來源

如要進一步瞭解捲動式動畫，請觀看系列影片或閱讀說明文件。

劇集

本課程包含 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 集：結尾。

這集節目以先前幾集提供的示範和技巧為基礎，依序呈現。每集節目中顯示的示範和工具皆可在線上取得，連結會顯示在說明中。

其他資源