MOTION HUB

滚动上升显现

Reveal Up
#reveal-up · 46/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
上升距离--reveal_y
848
px
显现时长--reveal_dur_ms
3001200
ms
级联间隔--stagger_ms
0250
ms
触发阈值--reveal_threshold
0.050.6
入场缓动--reveal_ease

实现要点

NOTES
  1. 01

    渐进增强:默认全部可见,JS 就绪后给根元素加 .rv-armed 才应用隐藏态——无 JS、爬虫或打印场景下内容绝不消失。

  2. 02

    IntersectionObserver 一次观测全部 .reveal,进入视口加 .is-in 后立即 unobserve(一次性动效),全程零 scroll 事件监听。

  3. 03

    位移只动 transform + opacity(合成器路径),上升距离由 --reveal_y 控制;同批次元素按 section 内出现顺序以 --i × --stagger_ms 级联,形成波浪式入场。

  4. 04

    threshold 不宜超过 0.4:高个元素在矮视口里可能永远达不到高比例,导致永不显现;0.1-0.3 是安全区间。

  5. 05

    reduced-motion / 无 IntersectionObserver 环境:不隐藏任何元素,内容直接完整呈现;demo 的自动滚动是预览辅助,用户滚动即停。

源代码

SOURCE

加载源代码…