我们很高兴地宣布推出 “充分发挥滚动驱动型动画的强大功能”这门 10 课视频课程,让您可以全面了解如何使用 CSS 或 JavaScript 实现滚动驱动型动画。
您可以在 YouTube 上观看该系列节目。第一集已嵌入在此处。
滚动条驱动的动画?
借助滚动条驱动的动画,您可以使用现有的 CSS 或 WAAPI 动画,并在滚动时为其添加动画效果。因此,滚动驱动型动画会继承这些 API 带来的所有优势。这包括硬件加速的滚动驱动型动画,在主线程被阻塞时不会出现卡顿。
从 Chrome 115 开始,Chrome 中提供了滚动驱动型动画,非常适合渐进式增强。
剧集
本课程共 10 集,分为两个主要部分:第一部分介绍构成滚动驱动型动画的核心概念,第二部分介绍一些实用应用。
- 第 1 集:简介。
- 第 2 集:核心概念:
scroll()
和ScrollTimeline
。 - 第 3 集:核心概念:
view()
和ViewTimeline
。 - 第 4 集:核心概念:时间轴范围揭秘。
- 第 5 集:核心概念:时间轴查找和命名时间轴。
- 第 6 集:实际应用:向滚动容器添加滚动阴影。
- 第 7 集:实际应用:为元素添加不同方向的动画效果。
- 第 8 集:实际应用:为滚动 3D 模型等添加动画效果。
- 第 9 集:实际应用:滚动速度检测。
- 第 10 集:片尾。
最好按顺序观看这些分集,因为它们以之前分集中介绍的演示和技巧为基础。每集中展示的演示和工具均可在线获取,并在说明中提供了链接。