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

本文介绍使用 jquery 实现滚动过程中多个同名类文本元素（如 `.text`）按顺序、独立淡出的完整方案，解决所有元素同步消失的问题，并提供可调参数的响应式实现。

在网页滚动动画中，若对所有 .text 元素统一应用基于 scrollTop() 的全局透明度计算（如 1 - scrollTop / 250），会导致它们完全同步淡出——只要滚动距离超过阈值，所有文本瞬间变透明，失去层次感和视觉节奏。根本原因在于未区分每个元素在页面中的垂直位置关系。

正确的做法是为每个 .text 元素建立独立的淡出触发点与衰减曲线。以下代码通过 $('.text').each() 遍历每个元素，并结合其 DOM 索引（index）动态生成差异化逻辑：

$(document).ready(function() {
  $(window).scroll(function() {
    $('.text').each(function(index) {
      const $this = $(this);
      const scrollTop = $(window).scrollTop();

      // 每个元素延迟开始淡出：第0个从0px起，第1个从5px起，依此类推
      if (scrollTop > index * 5) {
        // 分母随索引增大而增大 → 后续元素淡出更“慢”，形成错落感
        const fadeFactor = (index + 1) * 100;
        const opacity = Math.max(0, 1 - scrollTop / fadeFactor);
        $this.css('opacity', opacity);
      }
    });
  });
});

✅ 关键设计说明：

• index * 5 控制淡出起始偏移量：越靠后的元素越晚开始淡出，避免“一刀切”；
• (index + 1) * 100 控制淡出速度梯度：索引越大，分母越大，相同滚动距离下透明度下降越平缓，实现自然的层叠消隐；
• Math.max(0, ...) 确保透明度不小于 0，防止负值异常；
• 使用 const $this = $(this) 缓存 jQuery 对象，提升性能。

? 注意事项：

• 若需更精确控制（如按元素实际 offset().top 而非索引），应替换 index * 5 为 $this.offset().top - 100（-100 表示提前100px开始淡出）；
• 建议搭配 CSS transition: opacity 0.3s ease 实现平滑过渡（在 .text 类中添加）；
• 在真实项目中，建议用 requestAnimationFrame 替代直接绑定 scroll 事件，或使用节流（throttle）优化性能；
• 现代替代方案：可使用 Intersection Observer API 实现更高效、无依赖的原生淡入/淡出，但 jQuery 方案仍适用于快速原型或遗留系统。

该方法让每一行文本拥有专属的“消失节奏”，既解决了同步消失问题，又赋予页面优雅的视差式阅读体验。