本文详解如何利用 intersection observer api 实现多个标题元素在滚动进入视口时，各自独立触发「逐字浮现」动画，避免页面加载时全部同时播放，提升用户体验与性能。
本文详解如何利用 intersection observer api 实现多个标题元素在滚动进入视口时，各自独立触发「逐字浮现」动画，避免页面加载时全部同时播放，提升用户体验与性能。
在网页中为标题添加「逐字动画（word-by-word reveal）」是一种常见且富有表现力的动效设计。但若直接在 window.onload 中统一触发动画，所有 .heading-reveal 元素会在页面加载完成瞬间集体启动动画，违背“按需呈现”的交互逻辑。根本原因在于：CSS 动画由 animation 属性声明驱动，而你的原始代码中，--word-index 自定义属性和 reveal 类是在进入视口后才设置的，但 span 元素初始已具备 animation 样式（写在 .heading-reveal span 规则中），导致浏览器在 DOM 渲染时就解析并预执行了动画（此时 --word-index 未定义，默认为 0），造成所有单词几乎同时淡入。
✅ 正确解法是：将动画声明完全解耦到 .reveal 类中，确保动画仅在类被显式添加（即元素真正进入视口）时才生效。
以下是优化后的完整实现：
✅ HTML 结构（保持语义清晰）
<h1 class="heading-reveal"> <span>Title</span> <span>Goes</span> <span>Here</span> </h1> <div style="height: 100vh;"></div> <!-- 模拟长页面，确保后续标题需滚动才可见 --> <h1 class="heading-reveal"> <span>2nd</span> <span>Title</span> <span>Here</span> </h1> <h1 class="heading-reveal"> <span>3rd</span> <span>Title</span> <span>Here</span> </h1>
✅ CSS 样式（关键：动画仅作用于 .reveal）
.heading-reveal {
display: flex;
flex-wrap: wrap;
margin: 2rem 0;
}
.heading-reveal span {
opacity: 0; /* 初始隐藏 */
/* 不在此处声明 animation，避免预执行 */
}
.heading-reveal span.reveal {
animation: revealWord 0.5s forwards;
animation-delay: calc(var(--word-index, 0) * 0.25s); /* fallback 0 防止计算异常 */
}
@keyframes revealWord {
to { opacity: 1; }
}
/* 可选：增强可访问性，禁用动画时优雅降级 */
@media (prefers-reduced-motion: reduce) {
.heading-reveal span.reveal {
animation: none;
opacity: 1;
}
}
✅ JavaScript 逻辑（精准控制触发时机）
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
root: null, // 监听视口
rootMargin: '0px', // 无偏移
threshold: 0.1 // 10% 可见即触发（可根据需求调至 0.01 实现更灵敏响应）
};
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 为当前标题内每个单词 span 设置索引并添加 reveal 类
entry.target.querySelectorAll('span').forEach((span, index) => {
span.style.setProperty('--word-index', index);
span.classList.add('reveal');
});
obs.unobserve(entry.target); // 单次触发，避免重复回调
}
});
}, observerOptions);
// 观察所有标题容器
document.querySelectorAll('.heading-reveal').forEach(el => {
observer.observe(el);
});
});
⚠️ 注意事项与最佳实践
-
不要使用
window.onload：它等待所有资源（如图片、字体）加载完毕，可能显著延迟动画初始化；推荐用DOMContentLoaded，确保 DOM 构建完成即可运行。 -
threshold值说明：0.1表示元素 10% 高度进入视口即触发。若希望更“懒”，可设为0.01；若需更稳定（如防误触），可设为0.2。0.8并非无效，但需确保元素足够高才能满足 80% 可见条件——对短标题几乎无法触发，故0.1更通用。 -
性能优化：
unobserve()是关键，避免持续监听已动画完成的元素，减少 Observer 开销。 -
无障碍友好：通过
prefers-reduced-motion媒体查询自动禁用动画，符合 WCAG 推荐。
通过以上结构化改造，每个 <h1 class="heading-reveal"></h1> 将在其首次滚动进入视口时，独立计算内部单词顺序并依次淡入，真正实现流畅、可控、高性能的延迟动画体验。
