如何实现滚动时逐个文字淡出效果

本文介绍如何使用 jquery 实现页面滚动时，多个具有相同类名的文本元素按顺序、独立地渐隐消失，避免所有文字同步消失的问题。核心在于为每个元素计算差异化透明度，而非统一应用全局滚动值。

在网页滚动动画中，若对所有 .text 元素统一使用 $(window).scrollTop() 计算 opacity（如 1 - scrollTop / 250），会导致所有元素透明度完全同步变化——一旦滚动超过阈值，全部瞬间变透明，失去层次感与视觉节奏。正确解法是为每个元素引入基于其位置（索引）的偏移量和衰减系数，实现“逐行/逐段渐隐”的自然效果。

以下为优化后的 jQuery 实现：

$(document).ready(function() {
  $(window).scroll(function() {
    $('.text').each(function(index) {
      const scrollTop = $(window).scrollTop();
      // 每个元素延迟触发：第0个从0px开始淡出，第1个从5px，第2个从10px……
      const triggerOffset = index * 5;

      if (scrollTop > triggerOffset) {
        // 分母随索引增大而增大 → 后续元素淡出更缓慢，避免底部文字过早消失
        const fadeFactor = (index + 1) * 100;
        const opacity = Math.max(0, 1 - (scrollTop - triggerOffset) / fadeFactor);
        $(this).css("opacity", opacity);
      }
    });
  });
});

✅ 关键设计说明：

• index * 5：为每个 .text 元素设置垂直触发偏移，确保顶部元素先开始淡出，下方元素依次跟进；
• (index + 1) * 100：使靠后的元素拥有更大的分母，透明度下降更平缓，防止底部内容“一闪而没”；
• Math.max(0, ...)：强制 opacity 不低于 0，避免负值导致异常渲染；
• 使用 scrollTop - triggerOffset 确保淡出起始点精准对齐各元素实际进入视口的位置。

? 注意事项：

• 若元素高度差异较大，建议改用 $(this).offset().top 替代 index 计算更精确的触发时机；
• 生产环境推荐使用 requestAnimationFrame 节流滚动事件，或改用 CSS @scroll-timeline + opacity 过渡（现代浏览器支持）以提升性能；
• 基础 HTML 结构需确保 .text 元素具备足够垂直间距（如通过 margin 或 line-height），否则视觉过渡会显得拥挤。

通过此方案，你将获得流畅、有层次的滚动淡出效果——每一行文字都像被卷轴缓缓收起，真正实现“随滚动渐隐”的专业交互动效。