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

时间：2026-07-21 11:32:54 编辑：袖梨来源：一聚教程网

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

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

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

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

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

✅ 核心逻辑说明

使用 document.addEventListener('scroll') 统一监听（避免重复绑定）；
判断每个 .item 是否处于「潜在可见区域」：wrapper.offsetTop < scrollY + innerHeight && wrapper.offsetTop + wrapper.offsetHeight > 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 确保长文本完全滑入时无截断。

? 完整可运行代码

<!DOCTYPE html><html><head>  <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></head><body>  <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></body></html>

⚠️ 注意事项

性能优先：使用 requestAnimationFrame 节流滚动处理，避免布局抖动（Layout Thrashing）；
无障碍友好：动画不影响语义结构，屏幕阅读器仍可正常读取内容；
移动端适配：需额外监听 touchmove 并阻止默认行为（若需精确控制）；
CSS 注意：.item 必须设为 position: absolute，且 top: 0 保证纵向对齐基准一致；
扩展性：如需淡入/缩放等复合动画，可在 item.style 中叠加 opacity 或 transform。

该方案彻底规避了 IntersectionObserver 的边界判定模糊性，以滚动坐标系为唯一依据，确保长文本、不规则容器下的动画精准同步。

推荐专题

最新下载

热门教程

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

✅ 核心逻辑说明

? 完整可运行代码

⚠️ 注意事项

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程