如何实现滚动时逐个元素渐隐的文本效果

聖光之護 2026-01-01 00:00:00 次阅读

本文介绍如何使用 jquery 实现页面滚动时，多个具有相同类名（如 `.text`）的文本元素按顺序、独立地渐隐，避免所有文字同步消失的问题。核心在于为每个元素计算独立的滚动阈值与透明度衰减曲线。

要实现“滚动时文本逐个淡出”的效果，关键在于打破全局统一计算逻辑。原代码中 $(".text").css("opacity", 1 - $(window).scrollTop() / 250) 对所有 .text 元素应用完全相同的透明度值，导致它们同步变透明——这显然不符合“逐个淡出”的交互预期。

正确做法是：遍历每个 .text 元素，根据其 DOM 顺序（或实际位置）引入偏移量（offset），使每个元素拥有独立的触发起点和衰减速率。以下是优化后的 jQuery 实现：

$(document).ready(function() {
  $(window).scroll(function() {
    $('.text').each(function(index) {
      const scrollTop = $(window).scrollTop();
      // 为每个元素设置渐隐起始点：第0个从0px开始，第1个从5px，依此类推
      const fadeStart = index * 5;

      // 只有当滚动超过该元素专属起始点时才开始渐隐
      if (scrollTop > fadeStart) {
        // 分母随索引增大而增大 → 后续元素衰减更平缓，避免过早消失
        const fadeDuration = (index + 1) * 100; // 第1个元素在100px内完成淡出，第2个需200px...
        const opacity = Math.max(0, 1 - (scrollTop - fadeStart) / fadeDuration);
        $(this).css('opacity', opacity);
      }
    });
  });
});

✅ 关键改进说明：

✅ $('.text').each(...) 确保逐个处理，而非批量赋值；
✅ 引入 fadeStart = index * 5 实现“错峰触发”，避免全部同时开始淡出；
✅ 使用 (scrollTop - fadeStart) 计算相对滚动距离，使衰减真正基于各元素自身可见性状态；
✅ Math.max(0, ...) 防止透明度为负值，确保最小 opacity 为 0（完全隐藏）；
✅ fadeDuration 动态增长，让下方元素淡出过程更长，视觉更自然。

⚠️ 注意事项：

若元素垂直间距不均（如含不同 margin/padding），建议改用 $(this).offset().top 替代 index 计算更精确的视口位置关系；
在真实项目中，推荐结合 requestAnimationFrame 或节流（throttle）优化 scroll 事件性能，防止频繁重绘卡顿；
现代方案可考虑纯 CSS + Intersection Observer API 实现更高效、无依赖的渐隐动画（如配合 opacity + transform: translateY() 的 transition）。

通过上述方法，你将获得流畅、可控、符合直觉的滚动渐隐体验——每个文本按序淡出，互不干扰，真正实现“随滚动优雅退场”的设计目标。