Bramus
我们非常自豪地宣布推出《Unleash the Power of Scroll-Driven Animations》视频课程，该课程包含 10 个部分，旨在全面学习使用 CSS 或 JavaScript 的滚动驱动型动画。
您可以在 YouTube 上观看连续剧。第一集就在这里嵌入。
滚动条驱动的动画？
借助滚动驱动的动画，您可以采用现有的 CSS 或 WAAPI 动画，并在滚动时为其添加动画效果。因此，滚动驱动的动画可以继承这些 API 带来的所有优势。这包括硬件加速的滚动驱动型动画，这些动画在主线程被阻塞时不会出现卡顿。
Chrome 115 及更高版本提供滚动驱动的动画，是渐进式增强的理想候选者。
剧集
本课程包含 10 集，分为两大部分：首先介绍构成滚动式动画的核心概念，然后是一些实际应用。
- 第 1 集：简介。
- 第 2 集：核心概念：
scroll()和ScrollTimeline。 - 第 3 集：核心概念：
view()和ViewTimeline。 - 第 4 集：核心概念：时间轴范围揭秘。
- 第 5 集：核心概念：时间轴查询和已命名的时间轴。
- 第 6 集：实用应用：向滚动容器添加滚动阴影。
- 第 7 集：实用应用：按照不同方向为元素添加动画效果。
- 第 8 集：实用应用：在滚动页面上为 3D 模型等内容添加动画效果。
- 第 9 集：实用应用：滚动速度检测。
- 第 10 集：结语。
这些剧集是按照前几集介绍的演示和技巧构建的，因此是按顺序观看的。每集节目中展示的演示和工具可在线获取，说明中也提供了相应链接。