文字逐字浮现

Text Reveal

初级通用

大标题出现时，字一个接一个地从模糊、略微偏下的状态浮上来，像被慢慢显影出来。很多品牌官网和发布会页面用它来呈现最重要的那句话，比整句一起淡入更有仪式感。

你可能会说：「官网最大的那句标语，能不能做成滚到的时候一个字一个字浮现出来，有点电影字幕的感觉？」

效果预览标题一个字一个字浮上来

正在加载演示…

怎么做3 步做出来

把标题拆成一个个 span

每个字（或每个词）包一个 span，并用 CSS 变量 --i 记下它是第几个，后面靠它算延迟。拆开后读屏可能会一个字一个字地读，所以完整的句子放在标题的 aria-label 里，拆出来的 span 都标 aria-hidden。中文按字拆，英文按单词拆。

查看代码js

const title = document.querySelector('.reveal');
const text = title.textContent.trim();
title.setAttribute('aria-label', text);
title.innerHTML = '';
[...text].forEach((char, i) => {   // 英文可改为 text.split(' ')
  const span = document.createElement('span');
  span.textContent = char;
  span.setAttribute('aria-hidden', 'true');
  span.style.setProperty('--i', i);
  title.appendChild(span);
});

每个字错开一点开始浮现

每个字的动画都一样：从透明、模糊、偏下，到清晰、归位。延迟等于序号乘以间隔，字就一个接一个地出来。span 要设成 inline-block，transform 才对它生效。

查看代码css

.reveal span {
  display: inline-block;
  opacity: 0;
}
.reveal.is-visible span {
  animation: reveal-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes reveal-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(0.4em); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal span { opacity: 1; animation: none !important; }
}

3
滚到眼前再播放
用 IntersectionObserver 等标题进入视野再加上 is-visible，只播一次。如果标题本来就在首屏，页面加载完就会直接播放。注意别让脚本失败时标题一直透明：可以只在脚本运行后才给标题加上需要动画的类。
查看代码收起代码js
```
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) return;
  title.classList.add('is-visible');
  observer.disconnect();
}, { threshold: 0.4 });
observer.observe(title);
```

适合放在哪

适合用

品牌官网、发布会页面最重要的一句标语。
长页面里每个章节的大标题，滚到时浮现，引导阅读节奏。
活动开场页、年度报告封面的标题。

不适合用

正文段落别逐字浮现；字太多，等得人着急。
按钮、导航上的文字别做；用户要马上看清、马上点。
一句话超过二十来个字时，把间隔调小或改成按词拆，否则最后一个字出来要好几秒。

让 AI 帮你做复制给 AI Agent 直接用

请给【最重要的那句标题，如：首页 Hero 的主标语】加上逐字浮现效果。先阅读标题组件和项目里已有的动画写法，确认文案是否来自国际化配置。要求：把标题按字（中文）或按词（英文）拆成 span，用 CSS 变量记录序号；完整句子写进 aria-label，拆出的 span 都 aria-hidden；每个字从透明、模糊、略偏下浮现到清晰归位，单字约 0.7 秒，相邻间隔 40~80 毫秒，整句控制在 2 秒内；用 IntersectionObserver 进入视野后播放一次；脚本失败时标题必须可见；开启减少动效时直接显示。不改无关代码。最后说明怎样验证：读屏只读一次完整句子，禁用 JavaScript 时标题正常显示。

用到的知识

错峰入场滚动显现关键帧减少动效