用途:在页面滚动过程中,当元素进入视口时执行一次轻微上浮加淡入效果,为长落地页和堆叠内容区块带来平稳的阅读节奏。
主要能力:基于 IntersectionObserver,元素进入视口时添加 .is-in 类且仅触发一次;支持可选延迟实现错峰出现,延迟以毫秒为单位;仅对 transform 与 opacity 做动画,并在元素展示后取消观察以节省性能;遵循 prefers-reduced-motion,开启减少动态效果时内容立即显示、不做位移。
使用方式:将 scroll-reveal.css 与 scroll-reveal.js 复制进项目并引入;给需要揭示的元素添加 data-reveal 属性,如 <section data-reveal>…</section>,需要错峰时再加 data-reveal-delay="80"。React 中可渲染 data-reveal 属性并在挂载后执行初始化,或使用等价的 useEffect 加 IntersectionObserver 实现。
适用场景:长落地页、堆叠内容区块等需要从容节奏的页面。不建议用于首屏必须立即看到的主视觉内容;也不要同时揭示大量元素,建议错峰,一次最多约 3 个。
限制:资料未提供具体安装命令、包管理器信息、框架适配范围、浏览器兼容清单及授权方式,暂未提供。