如何基于滚动进度实现文本元素的动态入场动画-js教程-PHP中文网

如何基于滚动进度实现文本元素的动态入场动画

本文介绍一种轻量、高性能的纯 javascript 方案，通过监听页面滚动并计算元素在视口中的相对位置，驱动文本容器从左右两侧平滑滑入/滑出，支持自定义起始方向与响应式宽度适配。

本文介绍一种轻量、高性能的纯 javascript 方案，通过监听页面滚动并计算元素在视口中的相对位置，驱动文本容器从左右两侧平滑滑入/滑出，支持自定义起始方向与响应式宽度适配。

要实现「随滚动进度触发动画」的文本滑入效果（如城市名列表从左/右飞入），关键在于：将滚动位置映射为 0–100% 的可视进度，并据此动态更新元素的 left 或 right 偏移值。原始 jQuery 实现存在两个核心问题：

错误依赖 getBoundingClientRect().top 计算视口内位置，未考虑父容器滚动上下文与元素实际可见区间；
在 IntersectionObserver 回调中重复绑定 scroll 事件，导致内存泄漏与样式抖动。

以下是优化后的现代实现方案（无 jQuery，兼容主流浏览器）：

✅ 核心逻辑说明

使用 document.addEventListener('scroll') 统一监听（避免重复绑定）；
判断每个 .item 是否处于「潜在可见区域」：wrapper.offsetTop scrollY；

计算滚动进度 scrollProgress：

const screenHeight = window.innerHeight - item.offsetHeight;
let scrollProgress = 100 - (100 / screenHeight * (item.offsetTop - window.scrollY));
scrollProgress = Math.max(0, Math.min(100, scrollProgress)); // 限定在 [0, 100]

根据 data-position="left" 或 "right" 动态设置偏移：
- left 方向：起始位置为 -100% × 宽度因子，随进度向右移动；
- right 方向：起始位置为 100% × 宽度因子，随进度向左移动；
宽度因子 faktor = (window.innerWidth + item.offsetWidth) / window.innerWidth 确保长文本完全滑入时无截断。

? 完整可运行代码



  <style>
    body {
      padding: 1500px 0;
      background: #222;
      margin: 0;
    }
    .wrapper {
      background: orange;
      overflow: hidden;
      padding: 200px 0;
      position: relative;
    }
    .item {
      background: green;
      height: 100px;
      position: absolute;
      top: 0;
      transition: none; /* 避免 CSS 过渡干扰滚动实时性 */
    }
    .item:nth-child(1) { width: 500px; }
    .item:nth-child(2) { width: 2500px; }
    .item:nth-child(3) { width: 1000px; }
    .item:nth-child(4) { width: 750px; }
    .item:nth-child(5) { width: 1800px; }
    .item:nth-child(6) { width: 900px; }
  </style><div class="wrapper">
    <div class="item" data-position="left"></div>
    <div class="item" data-position="right"></div>
    <div class="item" data-position="left"></div>
    <div class="item" data-position="left"></div>
    <div class="item" data-position="right"></div>
    <div class="item" data-position="right"></div>
  </div>

  <script>
    const run = () => {
      const wrappers = document.querySelectorAll('.wrapper');
      if (!wrappers.length) return;

      const updateItems = () => {
        wrappers.forEach(wrapper => {
          const items = wrapper.querySelectorAll('.item');
          if (!items.length) return;

          items.forEach(item => {
            // 检查 wrapper 是否在视口垂直范围内
            const wrapperTop = wrapper.offsetTop;
            const wrapperBottom = wrapperTop + wrapper.offsetHeight;
            const scrollY = window.scrollY;
            const viewportHeight = window.innerHeight;

            if (wrapperTop > scrollY + viewportHeight || wrapperBottom < scrollY) return;

            const position = item.getAttribute('data-position');
            if (!position) return;

            // 关键：计算宽度缩放因子（适配不同长度文本）
            const faktor = (window.innerWidth + item.offsetWidth) / window.innerWidth;
            const screenHeight = viewportHeight - item.offsetHeight;

            // 计算当前 item 的滚动进度（0~100）
            let scrollProgress = 100 - (100 / screenHeight * (item.offsetTop - scrollY));
            scrollProgress = Math.max(0, Math.min(100, scrollProgress));

            // 计算起始偏移（vw 单位）
            let startPos = 100 - 100 * faktor;
            if (position === 'right') {
              startPos = 100 * faktor - (100 + 100 * faktor);
            }

            // 应用动态偏移
            const progress = startPos + scrollProgress * faktor;
            item.style[position] = `${progress}vw`;
          });
        });
      };

      // 节流优化：避免高频触发（生产环境建议添加防抖）
      let ticking = false;
      const requestTick = () => {
        if (!ticking) {
          requestAnimationFrame(() => {
            updateItems();
            ticking = false;
          });
          ticking = true;
        }
      };

      window.addEventListener('scroll', requestTick);
      window.addEventListener('resize', requestTick); // 响应式适配
      updateItems(); // 初始化
    };

    run();
  </script>