官方文档地址：react-spring.dev/docs/compon…
官方文档解释
Parallax 和 ParallaxLayer配合使用创造视觉位移效果，其中最重要参数当属于ParallaxLayer的参数offset 和speed，官方文档上对这些参数的解析讲解非常少，晦涩难懂
- offset：决定了layer会处于何处当滚动至相应的视窗时”
- speed：根据其偏移量移动该layer，数值可以是正的或负的；会影响该层的初始位置，但不会影响它的最终偏移位置
后续在github上 @react-spring/parallax的文档中
翻到这么几句话：
-
offset属性决定了图层最终的位置，而不是它开始的位置。例如，如果一个图层的偏移量是1.5，当第二页完全填满视口时，它将在第二页的一半位置。
-
speed属性影响层的初始起始位置，但不会影响它的最终偏移位置。
-
任何设置了sticky的图层的z-index会比普通图层高，且可以手动更改。
代码实操
现在使用react-spring官方提供的例子parallax-sticky分析这两个参数的含义；官方例子codesandbox地址
HTML代码
<div className='sticky-parallax'> <div className='background'></div> <Parallax pages={5} className='layerWrapeer' ref={paraRef} onClick={onScroll}> <ParallaxLayer offset={0} speed={0.5} style={{...alignCenter,justifyContent:"center",backgroundColor:"gray"}}> <p className={"scrollText"}>Scroll down</p> </ParallaxLayer> <ParallaxLayer sticky={{start:1,end:3}} style={{...alignCenter,justifyContent:"flex-start"}}> <div className={`card sticky`}> <p>I'm a sticky layer</p> </div> </ParallaxLayer> <ParallaxLayer offset={1.5} speed={1.5} style={{...alignCenter,justifyContent:"flex-end",backgroundColor:"cadetblue"}}> <div className={` card parallax purple`}> <p>I'm not</p> </div> </ParallaxLayer> <ParallaxLayer offset={2.5} speed={1.5} style={{...alignCenter,justifyContent:"flex-end",backgroundColor:"aquamarine"}}> <div className={` card parallax blue`}> <p>Neither am I</p> </div> </ParallaxLayer> </Parallax> </div>
浏览器展示dom结构（调试将重点观察箭头所指transform参数值）
先研究offset值的含义
- 修改第一个ParallaxLayer参数 offset = 0 ，speed = 0 ，此时y轴偏移量为0
- offset = 1 ，speed=0 下，偏移量为300
- offset = 1，speed = 0.5下，偏移量为450，这个时候我们肯定觉得偏移量是 (1+0.5) * 300 ，先不急先看下一个
- offset = 2，speed = 0.5下，偏移量为900，并不是(2+0.5) * 300 = 750，
- offset = 2，speed = 1下，偏移量为1200，并不是(2+1) * 300 = 900，
分析可得结论：初始偏移量并非 （offset + speed） * 视窗高度，其实应该为offset * 视窗高度 * (speed +1)，即：speed导致的额外偏移量是一个相对值，其相对于offset本身导致的偏移量，相同的speed ,offset越大，其额外偏移量也越大
研究speed值的含义
可以在页面上创建点击事件，使用Parallax 的scrollTo滚动至pages规定的页面上（0，1，2...）
- **offset = 2，speed = 1，**初始视窗(offset = 0)下偏移量为 1200，视窗内看不到该layer
- 点击滚动后，滚动至下一个视窗(offset = 1)，偏移量为 900，视窗内看不到该layer
- 再次点击滚动，滚动至下一个视窗(offset = 2，与参数一致)，偏移量为 600，此时该layer处于视窗中央
**
**
结论：每点击切换一个视窗，该layer滑移的距离为 speed * 视窗高度，也正好与speed参数的中文含义-速度匹配上，且只要页面滚动，该layer就会按照该速度滚动
最终结论：
- offset：决定了图层最终的位置，而不是它开始的位置；初始偏移量并非 （offset + speed） * 视窗高度，其实应该为offset * 视窗高度 * (speed +1)，即：speed导致的额外偏移量是一个相对值，其相对于offset本身导致的偏移量，相同的speed ，offset越大，其额外偏移量也越大
- speed：属性影响层的初始起始位置，但不会影响它的最终偏移位置；每点击切换一个视窗，该layer滑移的距离为 speed * 视窗高度
