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

【问题标题】：Creating a Simple Element Scroll Animation (javascript/css)创建一个简单的元素滚动动画 (javascript/css)
【发布时间】：2021-04-22 11:36:17
【问题描述】：

场景/问题：

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

规定/依赖关系：

给定最大滚动高度和用户的视口高度。当滚动高度为 0 时，元素最初应位于屏幕的最左侧或最右侧。当用户向下滚动时，元素会平移回其在 (0,0) 处的中心位置。此动画在页面结束的最大滚动高度处停止。 Y 变换值在整个循环过程中不会发生变化，并且元素的容器是静态的。

这是一个例子：

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

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

用户然后向下滚动

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

我有兴趣使这个动画动态化，这样屏幕大小就不会阻止翻译。我只是在寻找数学方程式来代替我的transform: translate(${MATH},y) css。

【问题讨论】：

你可以在这里找到类似的帖子：stackoverflow.com/questions/64635111/…
@54ka 我所描述的问题是一个抽象的例子。我仍然对我的具体示例的解决方案感兴趣，因为您链接的那个有一个非常具体的场景。谢谢！我一定会看看这个。
好吧，我找到了我正在寻找的解决方案，只需从滚动位置减去 scrollMaxY 即可。但我现在需要让这更顺利。

标签： javascript html css transform translate

【解决方案1】：

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

【讨论】：