创建一个简单的元素滚动 Animation (javascript/css)

Question

场景/问题：

我正在我的页面上创建 javascript 滚动 animation。 当用户向下滚动时，文本应该变得可见，因为它从页面的一侧向任一方向平移，并且不会超过其容器内居中的 position (0,0)。

规定/依赖性：

给定最大滚动高度和用户的视口高度。 当滚动高度为 0 时，元素最初应位于屏幕的最左侧或最右侧。 当用户向下滚动时，元素转换回其居中的 position 在 (0,0)。 这个 animation 在页面结束的最大滚动高度处停止。 Y 变换值在整个循环中不会改变，元素的容器是 static。

这是一个例子：

这些是示例的开始和结束转换：

初始 State：滚动高度 0 = {transform: "translate(50vw,0)"}

然后用户向下滚动

最后 State：滚动高度为 1391px = {transform: "translate(0,0)"}

我有兴趣使这个 animation 动态化，这样屏幕尺寸就不会禁止翻译。 我只是在寻找用来代替我的transform: translate(${MATH},y) css。

Answer 1

我找到了 lerp 的解决方案。 对于我的场景，这很好用。 使用 react-spring、interpolation、animate 和 Spring，您可以轻松地创建它。 该元素从屏幕任一侧的远端开始，当您滚动时，该元素会缓慢向内移动并在 (0,0) 处停止。 我将页面宽度添加回插值 function 所以它不会从 0 开始。

 <Spring native from={{ x: document.documentElement.scrollHeight - document.documentElement.clientHeight, }} to={{ x: props.position.y, }} > {({ x }) => ( <animated.p style={{ transform: x.interpolate( (x) => `translate(${ x + document.documentElement.scrollHeight - document.documentElement.clientHeight }px,0)` ), }} > ELEMENT </animated.p> )} </Spring>;

继承人的文档： https://www.react-spring.io/docs/props/performance