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

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 集：结尾。

最好按顺序观看这些剧集，因为它们会基于之前剧集中介绍的演示和技巧。每集节目中展示的演示和工具均可在网上找到，并已在说明中添加了链接。

更多资源