在网页交互设计中，滚动触发的文本动画能有效提升页面的动态感和用户浏览兴趣，其中文本逐个淡出的效果可以通过jQuery结合滚动事件监听轻松实现。这种方式不需要复杂的原生JavaScript逻辑，利用jQuery的动画方法和选择器就能快速完成效果开发。
实现原理说明
要实现滚动时文本逐个淡出的效果，核心逻辑分为三个部分：首先将目标文本拆分为单个字符或者单词，为每个拆分后的元素添加独立的样式控制；然后监听页面的滚动事件，计算目标元素相对于视口的位置；最后当元素进入指定的滚动区域时，按顺序触发每个字符的淡出动画，设置不同的延迟时间实现逐个效果。
基础页面结构搭建
首先需要在HTML中准备需要添加效果的目标文本容器，同时引入jQuery库，这里使用常见的CDN引入方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动文本逐个淡出效果</title>
<style>
.text-container {
margin: 500px 0;
font-size: 24px;
line-height: 1.6;
}
.char-item {
display: inline-block;
opacity: 1;
transition: opacity 0.5s ease;
}
.hidden {
opacity: 0;
}
</style>
</head>
<body>
<div class="text-container" id="targetText">
这是一段需要滚动时逐个淡出的示例文本
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
jQuery核心逻辑实现
文本拆分处理
首先需要把目标容器中的文本拆分为单个字符，为每个字符包裹一个span标签并添加统一的类名，方便后续控制：
$(document).ready(function() {
// 获取目标文本容器
const $textContainer = $('#targetText');
// 获取原始文本内容
const textContent = $textContainer.text();
// 清空容器内容
$textContainer.empty();
// 拆分文本为单个字符并包裹span
for (let i = 0; i < textContent.length; i++) {
const char = textContent.charAt(i);
// 空格单独处理，避免样式异常
if (char === ' ') {
$textContainer.append('<span class="char-item"> </span>');
} else {
$textContainer.append('<span class="char-item">' + char + '</span>');
}
}
});
滚动事件监听与动画触发
接下来监听页面滚动事件，计算目标元素的位置，当元素滚动到视口指定位置时，触发逐个淡出动画：
$(document).ready(function() {
// 文本拆分逻辑同上，此处省略重复代码
const $textContainer = $('#targetText');
const textContent = $textContainer.text();
$textContainer.empty();
for (let i = 0; i < textContent.length; i++) {
const char = textContent.charAt(i);
if (char === ' ') {
$textContainer.append('<span class="char-item"> </span>');
} else {
$textContainer.append('<span class="char-item">' + char + '</span>');
}
}
// 获取所有字符元素
const $charItems = $('.char-item');
// 标记是否已经触发过动画，避免重复执行
let isAnimated = false;
// 监听滚动事件
$(window).on('scroll', function() {
// 如果已经触发过动画，直接返回
if (isAnimated) return;
// 获取目标元素距离视口顶部的距离
const elementTop = $textContainer.offset().top;
// 获取当前视口的高度
const windowHeight = $(window).height();
// 获取当前滚动的距离
const scrollTop = $(window).scrollTop();
// 当元素进入视口底部上方100px的位置时触发动画
if (elementTop < scrollTop + windowHeight - 100) {
isAnimated = true;
// 遍历所有字符元素，逐个添加淡出类
$charItems.each(function(index) {
const $item = $(this);
// 每个字符延迟100ms触发，实现逐个效果
setTimeout(function() {
$item.addClass('hidden');
}, index * 100);
});
}
});
});
效果优化建议
- 滚动事件会频繁触发，建议添加节流处理，避免性能损耗，比如设置每200ms最多执行一次判断逻辑。
- 可以根据需求调整淡出的方向，比如修改
transition属性添加垂直位移，实现向上淡出的效果。 - 如果需要重复触发动画，可以移除
isAnimated标记，改为判断元素是否在视口内，离开视口后重置状态。 - 拆分文本时可以根据需求改为按单词拆分，只需要调整拆分逻辑，用空格作为分隔符即可。
完整可运行代码
以下是整合所有逻辑的完整代码，直接保存为HTML文件即可运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动文本逐个淡出效果</title>
<style>
.text-container {
margin: 500px 0;
font-size: 24px;
line-height: 1.6;
}
.char-item {
display: inline-block;
opacity: 1;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.hidden {
opacity: 0;
transform: translateY(20px);
}
</style>
</head>
<body>
<div style="height: 600px;">向下滚动查看效果</div>
<div class="text-container" id="targetText">
这是一段需要滚动时逐个淡出的示例文本
</div>
<div style="height: 600px;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const $textContainer = $('#targetText');
const textContent = $textContainer.text();
$textContainer.empty();
for (let i = 0; i < textContent.length; i++) {
const char = textContent.charAt(i);
if (char === ' ') {
$textContainer.append('<span class="char-item"> </span>');
} else {
$textContainer.append('<span class="char-item">' + char + '</span>');
}
}
const $charItems = $('.char-item');
let isAnimated = false;
let scrollTimer = null;
$(window).on('scroll', function() {
// 节流处理
if (scrollTimer) return;
scrollTimer = setTimeout(function() {
scrollTimer = null;
if (isAnimated) return;
const elementTop = $textContainer.offset().top;
const windowHeight = $(window).height();
const scrollTop = $(window).scrollTop();
if (elementTop < scrollTop + windowHeight - 100) {
isAnimated = true;
$charItems.each(function(index) {
const $item = $(this);
setTimeout(function() {
$item.addClass('hidden');
}, index * 100);
});
}
}, 200);
});
});
</script>
</body>
</html>