如何用JS实现页面向下滚动时文本从左到右动画显示效果

核心逻辑分两块：一是精准判断目标元素滚动到视口的时机，二是用CSS过渡实现文本从左到右的展开效果，全程原生JS+CSS就能实现，不需要额外依赖。

核心实现代码 #

1. HTML + CSS 基础结构 #

先写基础页面结构，文本初始状态设为宽度0、溢出隐藏，加宽度过渡属性：

<style>
/* 撑出页面滚动高度，方便测试效果 */
.page-wrap {
  min-height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animate-text {
  font-size: 2rem;
  font-weight: 600;
  /* 动画初始状态 */
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  /* 展开动画配置，时长、缓动函数可自行调整 */
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 触发动画时的状态 */
.animate-text.active {
  width: fit-content;
}
</style>

<div class="page-wrap">
  <p class="animate-text">滚动到这里就会看到我从左到右滑出来啦</p>
</div>

2. JavaScript 交互逻辑 #

优先用IntersectionObserver做视口判断，比传统scroll事件监听性能好很多，不会造成滚动卡顿：

const textEl = document.querySelector('.animate-text')

// 兼容处理：如果fit-content有兼容问题，提前拿文本实际宽度
// const realWidth = textEl.scrollWidth

const viewObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素露出40%的时候触发动画，阈值可自行调整
    if (entry.isIntersecting) {
      textEl.classList.add('active')
      // 用固定宽度的话就写 textEl.style.width = `${realWidth}px`
      // 动画只需要触发一次的话，触发后取消观察
      viewObserver.unobserve(textEl)
    }
  })
}, {
  threshold: 0.4
})

viewObserver.observe(textEl)

可选调整方向 #

• 如果需要兼容IE等老浏览器，可以降级为scroll事件监听+getBoundingClientRect判断元素位置，记得给监听函数加节流，避免频繁触发计算
• 要做逐字/逐行动画的话，把目标文本拆成单个字/单行的span标签，给每个span加递增的动画延迟即可，核心逻辑不变
• 想要更丰富的动效，可以在展开的同时加透明度变化，比如初始opacity设为0，active状态下设为1，过渡和宽度同步就行

注意：如果目标文本是动态加载的，记得等文本渲染完成后再初始化观察器、获取文本宽度，不然会出现宽度计算不准的问题。

内容的提问来源于stack exchange，提问作者hugo wandort