用途:当短标题、引言或引语需要逐词揭示,且动效应偏编辑感、克制高级时使用。适合不需要重型 GSAP SplitText 行为的场景。
主要能力:初始 opacity 0、translateY(20px),终态 opacity 1、translateY(0);时长 0.8s,缓动 cubic-bezier(0.16, 1, 0.3, 1),逐词错开 0.06s 至 0.08s(默认 0.07s);约 20% 可见并带轻微下方视口偏置时触发,只播放一次。
使用方式:HTML 使用 .word-reveal 与 data-word-reveal 属性。CSS 在无 JS 时保持可见,仅在 JS 激活且未分词前隐藏;.word-reveal__word 以 --word-index 计算过渡延迟。JavaScript 先加 html.js,用 splitWordReveal 按空白拆分文本、保留空格、不使用 innerHTML、设置 aria-label 并对词设 aria-hidden,再用 IntersectionObserver 触发并 unobserver。框架中在挂载后执行拆分,路由变化时清理观察器;Framer Motion 与 GSAP 使用相同参数。
限制:仅用于短文本,避免长段落;逐词而非逐字母;不加弹跳、旋转或大模糊,只动画 transform 与 opacity;不要拆分含链接、按钮或有意义内联标记的文本;换行重要时等字体就绪后初始化;需支持 prefers-reduced-motion。