如何解决反应弹簧视差
说明
我正在尝试使用 react-spring
实现一些视差动画,但我无法找到一种以响应式/统一方式分隔容器的方法。
可重现的片段
Here 我制作了一个片段,其中包含一个基本的视差效果,在滚动时为一些 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
位置开始。
结论
如果图层被设置为指定的视口高度,我猜这会起作用,但这真的是唯一的方法吗? 或者我可能误解了这个组件的用法?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。