全新推出“释放滚动动画的强大能力”

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

最好按顺序观看这些分集，因为它们以之前分集中介绍的演示和技巧为基础。每集中展示的演示和工具均可在线获取，并在说明中提供了链接。

更多资源