反应弹簧视差

Question

描述

我正在尝试使用 实现一些视差动画react-spring，但我无法找到一种以响应/统一方式分隔容器的方法。

可重现的片段

在这里，我制作了一个片段，其中包含在滚动时为一些 div 设置动画的基本视差效果：

<Parallax pages={5}>
  <ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>
</Parallax>

问题

具有基于其内容的高度的图层会使它们没有响应，因为每个图层都是从指定offset位置开始的。

结论

如果图层设置为指定的视口高度，我猜这会起作用，但这真的是唯一的方法吗？或者我可能误解了这个组件的用法？