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

Question

Scenario/Question:

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

Stipulations/Dependencies:

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

举个例子：

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

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

用户然后向下滚动

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

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

Answer 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

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

Creating a Simple Element Scroll Animation (javascript/css)

html

javascript

css

transform

translate