SCROLL · 滚动查看
参数调改
PLAYGROUND
上升距离--reveal_y
848
显现时长--reveal_dur_ms
3001200
级联间隔--stagger_ms
0250
触发阈值--reveal_threshold
0.050.6
入场缓动--reveal_ease
实现要点
NOTES- 01
渐进增强:默认全部可见,JS 就绪后给根元素加 .rv-armed 才应用隐藏态——无 JS、爬虫或打印场景下内容绝不消失。
- 02
IntersectionObserver 一次观测全部 .reveal,进入视口加 .is-in 后立即 unobserve(一次性动效),全程零 scroll 事件监听。
- 03
位移只动 transform + opacity(合成器路径),上升距离由 --reveal_y 控制;同批次元素按 section 内出现顺序以 --i × --stagger_ms 级联,形成波浪式入场。
- 04
threshold 不宜超过 0.4:高个元素在矮视口里可能永远达不到高比例,导致永不显现;0.1-0.3 是安全区间。
- 05
reduced-motion / 无 IntersectionObserver 环境:不隐藏任何元素,内容直接完整呈现;demo 的自动滚动是预览辅助,用户滚动即停。
源代码
SOURCE
加载源代码…