使用滚动驱动动画实现相反滚动方向

Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page.

有时设计师会有一些看似愚蠢的想法，但最终会让你喜欢上。这个概念就让我有了这种感觉，我需要构建在用户滚动页面时向相反方向移动的元素列。

Note: This demo respects reduced motion settings, so you’ll need to enable motion to see the effect. And we’re looking at Chrome and Safari support as I’m writing this.

注意：此演示遵循减弱动态效果设置，因此您需要启用动态效果才能看到效果。在我撰写本文时，我们正在关注 Chrome 和 Safari 的支持情况。

It’s really not as hard as you might think, thanks to modern CSS features, specifically scroll-driven animations. Not only that, but it’s fun to make, too! Let me show you how I approached it — and maybe you will want to share how you would do it differently.

这真的没有你想象的那么难，这要归功于现代 CSS 特性，特别是滚动驱动动画。不仅如此，制作过程也很有趣！让我来展示一下我是如何实现的——也许你会想分享你会如何以不同的方式来实现它。

The HTML

HTML

The HTML consists of a parent element (.opposing-columns), its children (.opposing-column), and its children’s children (.opposing-item):

HTML 由一个父元素（.opposing-columns）、它的子元素（.opposing-column）以及子元素的子元素（.opposing-item）组成：

<div class="opposing-columns">
  <!-- Column 1 -->
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
  <!-- Column 2 -->
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
  <!-- Column 3 -->
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
</div>

This is all we need in the markup. CSS will do the rest!

这就是我们在标记中所需的全部内容。CSS 会完成剩下的工作！

Styling the parent container

设置父容器样式

First off, we’re going to set things up so that this effect only applies to larger screens — there’s no real sense in supporting something like this on smaller screens because we need the additional space for the effect.

首先，我们要进行设置，使此效果仅适用...