SCROLL · 滚动查看
参数调改
PLAYGROUND
远景速率--rate_back
00.5
中景速率--rate_mid
00.8
远景光斑 A--glow_a
远景光斑 B--glow_b
底色--base
实现要点
NOTES- 01
速率定义为『层位移 = 滚动距离 × rate』:rate 0.12 的远景几乎钉在背景上,0.32 的中景明显滞后,速率差就是纵深;文字层 rate 为 0 保持可读。
- 02
scroll 监听 passive + rAF 合帧(ticking 锁),每帧最多写两次 translate3d——纯合成器路径,不触发 layout / paint。
- 03
装饰层上下各出血 35%,再大的速率也不会在 hero 边缘露底;hero 自身 overflow:hidden 兜底。
- 04
页面很长时建议用 IntersectionObserver 在 hero 不可见后注销计算;本 demo 保持全量更新,逻辑最简。
- 05
reduced-motion 下完全不动图层(静态背景);demo 的自动滚动为预览辅助,用户滚动即停。
源代码
SOURCE
加载源代码…