MOTION HUB

视差层次

Parallax Layers
#parallax-layers · 42/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
远景速率--rate_back
00.5
中景速率--rate_mid
00.8
远景光斑 A--glow_a
远景光斑 B--glow_b
底色--base

实现要点

NOTES
  1. 01

    速率定义为『层位移 = 滚动距离 × rate』:rate 0.12 的远景几乎钉在背景上,0.32 的中景明显滞后,速率差就是纵深;文字层 rate 为 0 保持可读。

  2. 02

    scroll 监听 passive + rAF 合帧(ticking 锁),每帧最多写两次 translate3d——纯合成器路径,不触发 layout / paint。

  3. 03

    装饰层上下各出血 35%,再大的速率也不会在 hero 边缘露底;hero 自身 overflow:hidden 兜底。

  4. 04

    页面很长时建议用 IntersectionObserver 在 hero 不可见后注销计算;本 demo 保持全量更新,逻辑最简。

  5. 05

    reduced-motion 下完全不动图层(静态背景);demo 的自动滚动为预览辅助,用户滚动即停。

源代码

SOURCE

加载源代码…