Bramus 分享了他对滚动链接动画的兴奋之情，这些动画完全由 HTML 和 CSS 提供支持。此外，还包含与 WAAPI 集成的 JavaScript 选项！
章节：
- 00:00 - 序言
- 00:15 - 简介+前导广告示例
- 03:41 - 滚动链接的动画与滚动触发的动画
- 05:18 - 使用 CSS 的基本示例（文档时间轴、滚动进度时间轴、scroll()、animate-timeline）
- 12:31 - 使用 JavaScript 的基本示例 (ScrollTimeline)
- 14:06 - 已命名的滚动进度时间轴（滚动时间轴名称、滚动时间轴-轴）
- 20:31 - 滚动进度时间轴偏移量
- 25:05 - 使用 JavaScript 在元素进入/退出时跟踪元素 (ViewTimeline)
- 31:09 - 使用 CSS 在元素进入/退出时跟踪元素（查看时间轴名称、视图时间轴-轴）
- 32:02 - 查看进度时间轴边衬区
- 33:07 - 查看进度时间轴示例（封面流程、联系人列表飞入/飞出、堆叠卡片）
- 35:40 - 今天就玩吧！
- 38:04 - 结语
资源：
- 封面流程演示 (CSS) → https://goo.gle/3SvEQbd
- 封面流程演示 (JS+WAAPI) → https://goo.gle/3F9S62h
- 滚动进度演示 (CSS) → https://goo.gle/3F9S6zj
- 滚动进度演示 (JS+WAAPI) → https://goo.gle/3Sq5nXn
- 进入演示后显示图片 (CSS) → https://goo.gle/3F9S8XX
- 进入演示时显示图片 (JS+WAAPI) → https://goo.gle/3Sto8JK
- 列表飞入 + 飞出效果演示 (CSS) →https://goo.gle/3Svg3UE
- 列表飞入 + 飞出效果演示 (JS+WAAPI) → https://goo.gle/3F9Saix
- 水平滚动版块演示 (CSS) → https://goo.gle/3SpaDe5
- 水平滚动部分演示 (JS+WAAPI) → https://goo.gle/3SAbcBz
- 视差 Cover to Sticky Header，伪造 (JS+WAAPI) → https://goo.gle/3SKoMCR
堆叠卡片演示 (JS+WAAPI) → https://goo.gle/3VW0wjD
包含所有 CSS 演示的集合 → https://goo.gle/3F9ScqF
包含所有 JS+WAAPI 演示的集合 → https://goo.gle/3F9ScXH
滚动链接动画规范 → https://goo.gle/3F9SduJ
滚动链接的 Animations Polyfill → https://goo.gle/3SyziN8
CSS WG 问题“恢复滚动偏移”→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
如需观看更多视频，请观看 HTTP 203 系列视频 → http://goo.gle/HTTP203
点击此处订阅 Google Chrome Developers 频道 → https://goo.gle/ChromeDevs
此外，如果您喜欢此内容，可能会喜欢 HTTP203 播客 → https://goo.gle/HTTP203Podcast