基于滚动进度的文本渐变填充动画实现教程-js教程-PHP中文网

基于滚动进度的文本渐变填充动画实现教程

碧海醫心

发布： 2025-09-16 14:24:19

原创

1052人浏览过

基于滚动进度的文本渐变填充动画实现教程

本文将详细介绍如何利用JavaScript的滚动事件，结合CSS样式，实现一种独特的文本填充动画效果。该效果能使文本颜色随着用户页面滚动进度的增加而从左到右逐渐填充，并在反向滚动时实现相应的“取消填充”，为网页增添动态且引人入胜的交互体验。

核心概念：滚动驱动的文本高亮

实现这种效果的核心思想是将页面的滚动位置映射为一个0到1之间的百分比，然后根据这个百分比动态地改变文本中每个单词的样式。当用户向下滚动时，这个百分比逐渐增大，更多的单词被标记为“高亮”状态；当用户向上滚动时，百分比减小，高亮的单词数量也随之减少，从而实现“取消填充”的效果。这种方法使得文本的视觉变化与用户的浏览行为紧密关联。

HTML 结构准备

首先，我们需要一个基本的HTML页面结构，包含一个用于显示动态文本的容器。为了让文本在滚动时保持可见，我们通常会将其定位为固定（position: fixed）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>滚动进度文本填充动画</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <span class="text"></span>
  <script src="script.js"></script>
</body>
</html>

登录后复制

在上述结构中，我们创建了一个元素，并赋予它text类，这将是我们动态插入和高亮文本的容器。

CSS 样式定义

为了确保页面可以滚动，我们需要给body设置足够的高度。同时，定义文本容器的固定位置和高亮文本的样式。

body {
  /* 为页面提供足够的滚动空间，以便观察效果 */
  height: 5000px; 
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.text {
  /* 将文本固定在视口顶部，使其始终可见 */
  position: fixed;
  top: 10px;
  left: 20px; /* 增加一些左边距 */
  max-width: 80%; /* 限制文本宽度 */
  color: #ccc; /* 默认文本颜色 */
}

.text span {
  /* 确保每个单词都是独立的元素，以便单独高亮 */
  display: inline-block;
  margin-right: 4px; /* 单词间距 */
  transition: color 0.1s ease-out; /* 添加颜色过渡效果，使高亮更平滑 */
}

.highlight {
  /* 高亮文本的颜色 */
  color: #f00; /* 醒目的红色 */
}

登录后复制

这里，我们为body设置了5000px的高度，以模拟一个可滚动的长页面。.text类被设置为position: fixed，确保文本始终停留在视口内。.highlight类定义了高亮文本的颜色，而.text span则确保每个单词能独立应用样式，并添加了简单的过渡效果以提升视觉流畅性。

JavaScript 逻辑实现

JavaScript是实现动态效果的关键。它负责：

获取页面的滚动百分比。
将原始文本分割成单词，并包装成独立的元素。
监听scroll事件，根据滚动百分比动态地为单词应用或移除高亮样式。

1. 获取滚动百分比

我们需要一个辅助函数来计算当前页面的滚动进度，将其表示为0到1之间的小数。

/**
 * 计算页面滚动百分比
 * @returns {number} 0到1之间的小数，表示滚动进度
 */
function getScrollFraction() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    // (当前滚动距离) / (可滚动总距离)
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight);
}

登录后复制

这个函数通过计算当前滚动距离与总可滚动距离的比值来得出滚动百分比。h[st] || b[st]用于兼容不同浏览器获取滚动距离的方式，h.clientHeight表示视口高度。

Hour One

AI文字到视频生成

查看详情

2. 初始化文本与监听滚动事件

接下来，我们将原始文本分割，包装成元素，并设置滚动事件监听器。

const HIGHLIGHT_CLASS = 'highlight'; // 定义高亮CSS类名
const LOREM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit libero eu ligula molestie, sed faucibus leo iaculis. Quisque scelerisque ligula in volutpat venenatis. Fusce velit felis, pretium eu varius quis, facilisis eget nunc. Quisque eu eros tellus. Cras condimentum efficitur turpis, ac laoreet velit rhoncus et. Maecenas non lorem auctor dolor auctor gravida ut at diam. Proin eleifend elementum lacus in varius. In dapibus mi ut erat gravida, non dictum nisi luctus. Aliquam imperdiet commodo ante, posuere vestibulum eros mattis vitae. Cras molestie commodo turpis, vitae tempus magna dictum pharetra. Duis quis eros at magna sodales mollis. Fusce sollicitudin purus sit amet est ullamcorper luctus. Donec molestie, nisi quis luctus malesuada, lectus arcu rutrum turpis, ac bibendum libero tellus at metus. Vivamus mattis ultricies metus eu dignissim. Mauris sed consectetur nisl.";

let words = LOREM_TEXT.split(" "); // 将文本按空格分割成单词数组
let textContainer = document.querySelector('.text'); // 获取文本容器DOM元素

// 初始渲染：将每个单词包装在<span>中并插入到容器
textContainer.innerHTML = words
  .map(w => `<span>${w}</span>`)
  .join(' ');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  let scrollFraction = getScrollFraction(); // 获取当前滚动百分比
  // 根据滚动百分比计算需要高亮的单词数量
  let wordsToHighlightCount = Math.floor(scrollFraction * words.length);

  // 重新渲染文本容器的HTML，动态应用高亮类
  textContainer.innerHTML = words
  .map((word, index) => 
    `<span ${index < wordsToHighlightCount ? `class="${HIGHLIGHT_CLASS}"` : ''}>${word}</span>`
  )
  .join(' ');
});

// 首次加载时也执行一次更新，确保初始状态正确
window.dispatchEvent(new Event('scroll'));

登录后复制

代码解析：

LOREM_TEXT 存储了我们要进行动画的文本内容。
words = LOREM_TEXT.split(" "); 将文本分割成单词数组。
textContainer.innerHTML = ... 首次渲染时，将每个单词包裹在标签中，并插入到.text容器。
window.addEventListener('scroll', ...) 是核心逻辑所在。每次滚动时：
- getScrollFraction() 获取当前的滚动百分比。
- wordsToHighlightCount 根据滚动百分比和总单词数，计算出应该高亮的单词数量。
- 再次使用map函数遍历words数组，根据index与wordsToHighlightCount的比较，决定是否为当前单词的元素添加highlight类。
- 最后，通过更新textContainer.innerHTML来刷新显示。

注意事项与优化

性能考量：innerHTML 的频繁更新 在每次滚动事件中都更新innerHTML会重新解析和渲染整个文本容器的内容，这在文本量非常大或滚动事件触发非常频繁时，可能会导致性能问题，尤其是在低性能设备上。
- 优化建议： 避免频繁的innerHTML更新。更优的做法是获取所有单词的元素引用，然后只修改它们的classList属性。例如：
```
// 优化后的滚动事件处理函数（示例）
const wordSpans = textContainer.querySelectorAll('span'); // 获取所有单词的span元素

window.addEventListener('scroll', () => {
 let scrollFraction = getScrollFraction();
 let wordsToHighlightCount = Math.floor(scrollFraction * words.length);

 wordSpans.forEach((span, index) => {
 if (index < wordsToHighlightCount) {
 span.classList.add(HIGHLIGHT_CLASS);
 } else {
 span.classList.remove(HIGHLIGHT_CLASS);
 }
 });
});
```
 登录后复制
 这种方式只修改DOM元素的类，而不重新构建整个HTML结构，效率更高。
滚动事件的防抖（Debounce）或节流（Throttle） 滚动事件是高频事件，短时间内会触发多次。为了避免过多的计算和DOM操作，可以考虑使用防抖或节流技术。
- 防抖（Debounce）： 在事件停止触发一段时间后才执行回调函数。适用于只需要在用户停止滚动后才更新的场景。
- 节流（Throttle）： 在一定时间间隔内只执行一次回调函数。适用于需要持续更新但又不想过于频繁的场景。对于此处的文本高亮效果，节流可能更适合，因为它允许在滚动过程中持续更新，但限制了更新频率。
文本长度与滚动高度的匹配 文本高亮的“速度”取决于body的高度和文本的单词数量。如果body高度很小但文本很长，高亮会非常迅速。反之，如果body很高但文本很短，高亮会很慢。开发者应根据实际需求调整body高度以获得最佳的用户体验。
自定义高亮效果 除了简单的颜色填充，你可以通过修改.highlight CSS类来实现更丰富的效果，例如：
- 背景色填充 (background-color)
- 字体加粗 (font-weight: bold)
- 字体大小变化 (font-size)
- 文本阴影 (text-shadow)
- 渐变背景（background-image: linear-gradient(...)）

总结

通过结合简单的HTML结构、灵活的CSS样式以及JavaScript的滚动事件监听，我们成功实现了一个引人注目的文本渐变填充动画。这个教程展示了如何将用户的滚动行为转化为动态的视觉反馈，为网页交互设计提供了新的可能性。在实际项目中，根据性能需求和用户体验目标，可以进一步优化DOM操作和事件处理机制。

以上就是基于滚动进度的文本渐变填充动画实现教程的详细内容，更多请关注php中文网其它相关文章！