jQuery文本逐字淡出滚动实现方法

今天golang学习网给大家带来了《jQuery 实现文本逐个淡出滚动效果》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

本文介绍如何通过 jQuery 实现页面滚动时，多个具有相同类名的文本元素按顺序、独立地渐隐消失，避免所有文本同步消失的问题。核心在于为每个元素设置基于其索引的差异化透明度计算逻辑。

在实现滚动淡出效果时，常见误区是直接对所有 .text 元素统一应用相同的 scrollTop() 计算公式（如 1 - $(window).scrollTop() / 250），这会导致所有文本在同一滚动位置瞬间归零透明度，失去层次感与视觉节奏。

正确做法是为每个元素引入唯一性偏移量——利用 .each() 遍历配合 index 参数，使每个文本的淡出起始位置和衰减速率与其 DOM 顺序相关联。以下是优化后的核心代码：

$(document).ready(function() {
  $(window).scroll(function() {
    $('.text').each(function(index) {
      const scrollTop = $(window).scrollTop();
      // 每个元素延迟开始淡出（index * 5px 偏移）
      // 且衰减分母随索引增大而增大，确保下方文本淡出更缓慢
      if (scrollTop > index * 5) {
        const opacity = 1 - scrollTop / ((index + 1) * 100);
        $(this).css('opacity', Math.max(0, opacity)); // 防止负值
      }
    });
  });
});

? 关键设计说明：

• index * 5：让第 0 个元素在滚动 0px 后即开始淡出，第 1 个延迟至 5px，第 2 个延迟至 10px……形成错峰消失效果；
• ((index + 1) * 100)：分母随索引递增，使靠后的文本透明度下降更平缓（例如第 1 个文本在 scrollTop=100 时完全透明，而第 3 个需到 300px 才完全透明）；
• Math.max(0, opacity)：强制透明度不低于 0，避免 CSS 渲染异常。

✅ 补充建议：

• 若需更高性能，可结合 requestAnimationFrame 节流滚动事件；
• 现代项目推荐使用 CSS @scroll-timeline + animation 实现原生滚动驱动动画（兼容性需查 caniuse）；
• 对于无 jQuery 依赖场景，可用 document.querySelectorAll('.text') 替代并用 forEach 遍历。

该方案兼顾可读性与实用性，适用于多段标题、引文或卡片式文案的渐进式退出动效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~