如何实现滚动时逐个文字淡出效果_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-01 00:00:00 点击率：次

本文介绍如何使用 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），否则视觉过渡会显得拥挤。

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

# css # jquery # html # 浏览器 # win # math # 事件 # this # margin # 渐隐 # 多个 # 互动 # 更大 # 推荐使用 # 你将 # 而非 # 不低于 # 如何使用 # 都像

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Excel如何防止输入重复数据_数据验证拒绝重复

下一篇：Java里如何使用LongAdder提升计数性能_Java高

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Excel如何防止输入重复数据_数据验证拒绝重复

下一篇：Java里如何使用LongAdder提升计数性能_Java高