通过利用滚动驱动动画中的 `scroll()` 变体，开发人员可以创造一种视觉错觉：当用户向下滚动页面时，网格中的不同列以不同的速率移动。这种技术将内容的视觉移动与视口的标准线性滚动解耦，从而实现了以前在没有沉重 JavaScript 开销的情况下难以实现的创意画廊布局。

变速滚动的机制

核心机制依赖于对特定容器（例如两列网格中的右侧列）应用方向变换。开发人员不是通过滚动容器移动实际内容，而是应用一个根据根元素滚动位置改变数值的 `translateY` 动画。

通过定义 `@keyframes` 动画并将其链接到 `scroll()` 时间轴，可以对右侧列进行编程，使其在相同的滚动距离内移动比左侧列更远的距离。例如，一个从 `12vh` 移动到 `-20vh` 的 `translateY` 会创建一个“向上漂移”效果，使内容看起来比标准的页面进度移动得更快。

“诀窍在于应用一个随着我们滚动而改变数值的方向变换。”

— Multi-Column Different-Speed Scrolling – Master.dev Blog

叠加基于视图的动画

除了全局的列移动外，滚动驱动动画中的 `view()` 变体允许对这些列中的单个项目进行细粒度控制。这可用于创建“缩放效果”——即照片在经过用户的可见区域时放大或轻微偏移的效果。

由于这些动画与 `view()` 时间轴绑定，效果会根据元素在视口中的可见性自动触发和反转。这允许实现复杂的、多层次的运动：一列以特定速度漂移，而其中的图像执行独立的、局部化的动画。

权衡与用户体验

虽然这些效果提供了高端的美学，但它们也带来了潜在的可用性担忧。高强度的非线性滚动可能会导致部分用户产生运动病或恶心，因此，实施 `prefers-reduced-motion` 查询是可访问性的推荐考虑因素。

此外，由于滚动驱动动画尚未在所有浏览器中得到普遍支持，作者采用了 `@supports` 查询来确保画廊的可访问性。在不支持的浏览器中，各列将仅以标准、统一的速度滚动，从而保持画廊的核心功能。