滚动文字揭示特效（滚动视差文字入场，方向实时可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动，包含标题与段落共 10 行文字。右上角控件可实时切换四种入场方向，「重新播放」一键回到顶部重看。

完整代码

<div class="st-scroller" id="stScroller">
  <h3 class="st-line">壹 · 开场白</h3>
  <p class="st-line">滚动揭示是长页面最常用的叙事手法……</p>
</div>

.st-scroller h3, .st-scroller p {
  opacity: 0;
  transform: translateY(26px);          /* 上移入场 */
  transition: opacity .6s ease, transform .6s ease;
}
.st-scroller h3.in, .st-scroller p.in {
  opacity: 1;
  transform: none;
}

const lines = scroller.querySelectorAll('h3, p');
const io = new IntersectionObserver(entries => {
  entries.forEach(en => {
    if (en.isIntersecting) {
      en.target.classList.add('in');     // 进入视口 → 显示
      io.unobserve(en.target);           // 只播放一次，之后移出队列
    }
  });
}, { root: scroller, threshold: 0.25 });
lines.forEach(el => io.observe(el));

实现要点：初始状态 opacity: 0 加位移，观察器检测到元素与滚动容器相交超过 25% 时添加 .in 类，CSS 过渡自动完成显现。左移/右移只需把 translateY 换成 translateX，缩放入场则用 scale(.86) → 1。

参数说明

兼容性与性能

• IntersectionObserver 由浏览器底层异步调度，滚动期间不产生 JS 密集计算，性能远优于 scroll 事件手动判断
• 元素触发一次后立即 unobserve 移出队列，长页面滚动到中后段时观察队列自然清空，零残余开销
• 动画只操作 opacity 与 transform，均走合成器；不支持观察器的极老浏览器可退化为「直接显示」
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android 现代版本），无需任何 polyfill

常见问题

Q: 进入视口一瞬间文字闪现而不是动画？ 检查初始状态是否在 CSS 里正确声明了 opacity: 0，且观察器在 DOM 就绪后才创建；本组件在脚本内绑定元素引用，不存在时序问题。

Q: 可以做成「滚动到哪亮到哪」的逐段高亮吗？ 可以。把观察器的回调改为「离开视口时移除类」即可双向绑定，配合 threshold 数组能实现段落级高亮联动。

Q: 整页使用与容器使用有什么区别？ 整页使用时 root 传 null（默认视口），容器内使用时传容器元素，其余代码完全一致。本组件演示即容器模式。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。