基于滚动进度的文本颜色填充动画教程-js教程-PHP中文网

基于滚动进度的文本颜色填充动画教程

本教程详细介绍了如何利用JavaScript的滚动事件，实现文本内容随页面滚动进度动态改变颜色的效果。通过计算滚动百分比，文章中的词语会根据滚动位置逐个被高亮显示，形成一种视觉上的“填充”动画，并在反向滚动时“取消填充”。教程涵盖了HTML结构、CSS样式和核心JavaScript逻辑，并提供了完整的代码示例。

1. 概述与核心概念

在网页设计中，为用户提供动态且富有交互性的体验至关重要。其中一种引人注目的效果是文本颜色根据用户滚动页面的进度进行动态填充。这种效果能够增强用户参与感，并可以用于引导用户关注特定内容或作为一种视觉进度指示器。

实现这一效果的核心思想是：

监听滚动事件：通过JavaScript捕获用户页面的滚动行为。
计算滚动进度：将当前的滚动位置转换为一个0到1之间的百分比值。
动态应用样式：根据计算出的滚动百分比，动态地为文本内容的不同部分应用或移除特定的CSS样式，从而改变其颜色。

本教程将通过一个具体的例子，展示如何将一段文本的词语逐个高亮，使其颜色随滚动进度从左到右逐渐“填充”，并在用户向上滚动时“取消填充”。

2. HTML 结构准备

首先，我们需要一个承载文本内容的HTML元素。为了方便JavaScript操作，我们使用一个元素，并为其添加一个类名text。

<!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"> <!-- 引入CSS文件 -->
</head>
<body>
  <!-- 文本内容将由JavaScript动态生成并填充到此span中 -->
  <span class="text"></span>
  <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

登录后复制

请注意，初始的元素是空的，其内容将由JavaScript动态生成。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

3. CSS 样式定义

为了实现动画效果，我们需要一些基本的CSS样式：

页面高度：为了能够滚动，body元素需要有足够的高度。
文本定位：为了让文本在滚动时保持在视口中的固定位置，我们可以使用position: fixed。
高亮样式：定义一个highlight类，用于改变被选中词语的颜色。

body {
  /* 设置一个较大的高度以确保页面可以滚动 */
  height: 5000px; 
  margin: 0; /* 移除默认边距 */
  font-family: sans-serif; /* 示例字体 */
  line-height: 1.6;
}

.text {
  /* 将文本固定在视口顶部，方便观察效果 */
  position: fixed;
  top: 10px;
  left: 20px; /* 增加左边距 */
  width: calc(100% - 40px); /* 适应宽度 */
  color: #aaa; /* 默认文本颜色 */
}

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

登录后复制

4. JavaScript 核心逻辑

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

初始化文本：将预设的文本拆分成单词，并用标签包裹，插入到HTML中。
监听滚动事件：在用户滚动时触发函数。
计算滚动百分比：确定当前页面滚动的进度。
更新文本样式：根据滚动百分比，动态地为相应数量的单词添加或移除highlight类。

// 定义高亮CSS类的字符串
const HIGHLIGHT = 'class="highlight"';
// 示例文本内容
const 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 = TEXT.split(" ");
// 获取HTML中用于显示文本的元素
let textContainer = document.querySelector('.text');

// 初始化文本容器：将每个单词用<span>包裹，并加入到容器中
textContainer.innerHTML = words
  .map(w => `<span>${w}</span>`)
  .join(' ');

/**
 * 计算页面滚动进度（0到1之间的小数）
 * @returns {number} 滚动百分比
 */
function getScrollFraction() {
    var h = document.documentElement, // 根元素 (<html>)
        b = document.body,          // <body> 元素
        st = 'scrollTop',           // 滚动距离属性名
        sh = 'scrollHeight';        // 可滚动高度属性名
    // 计算滚动距离与可滚动总高度的比例
    // 兼容不同浏览器下scrollTop和scrollHeight的获取方式
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight);
}

// 添加滚动事件监听器
window.addEventListener('scroll', () => {
  // 获取当前滚动进度
  let scrollFraction = getScrollFraction();

  // 根据滚动进度计算需要高亮的单词数量
  // Math.floor确保得到整数，避免小数导致部分单词高亮不完整
  let words_highlighted = Math.floor(scrollFraction * words.length);

  // 重新生成文本容器的innerHTML
  // 遍历所有单词，如果索引小于需要高亮的数量，则添加高亮类
  textContainer.innerHTML = words
    .map((w, i) => `<span ${i < words_highlighted ? HIGHLIGHT : ''}>${w}</span>`)
    .join(' ');
});

登录后复制

4.1 代码解析

HIGHLIGHT 和 TEXT 常量：HIGHLIGHT存储了要添加的CSS类属性字符串，TEXT是我们要进行动画处理的原始文本。
文本初始化：
- TEXT.split(" ") 将文本按空格分割成单词数组。
- words.map(w =>${w}).join(' ') 将每个单词包裹在标签中，然后用空格连接起来，形成最终的HTML字符串，并赋值给.text元素的innerHTML。这样做的目的是为了能够单独控制每个单词的样式。
getScrollFraction() 函数：
- 这个函数负责计算当前页面的滚动百分比。它通过获取文档根元素（documentElement）或body元素的scrollTop（已滚动距离）和scrollHeight（可滚动总高度）来完成。
- h.clientHeight 表示视口的高度。((h[sh]||b[sh]) - h.clientHeight) 计算的是实际可滚动的最大距离。
- 这个函数确保了在不同浏览器环境下都能正确获取滚动进度。
滚动事件监听器：
- window.addEventListener('scroll', ...) 注册了一个事件监听器，每当页面滚动时就会执行回调函数。
- 在回调函数内部，首先调用getScrollFraction()获取当前的滚动百分比。
- words_highlighted = Math.floor(scrollFraction * words.length)：将滚动百分比乘以总单词数，得到当前应该高亮的单词数量。Math.floor确保我们得到一个整数，避免部分单词被高亮。
- 最后，再次使用map方法遍历words数组。对于索引i小于words_highlighted的单词，为其标签添加HIGHLIGHT类，否则不添加。这样就实现了动态的高亮效果。

5. 注意事项与优化

性能考量：频繁操作innerHTML可能会导致性能问题，尤其是在文本量非常大的情况下。每次滚动都会重新构建并渲染整个文本内容。对于更复杂的动画或大量文本，可以考虑使用更高效的DOM操作，例如直接修改每个单词的classList。
平滑过渡：当前的实现是即时改变颜色。如果需要更平滑的颜色过渡，可以在CSS中为.highlight类添加transition属性，例如：
```
.text span {
  transition: color 0.3s ease-out; /* 为所有span添加过渡效果 */
}
.highlight {
  color: #f00;
}
```
登录后复制
文本长度与滚动速度：body的高度决定了总的滚动距离。如果body高度很小，文本会很快被全部高亮；如果高度很大，高亮过程会非常缓慢。你可以根据实际需求调整body的高度。
字符级填充：如果需要实现更精细的字符级填充，而不是单词级，你需要将文本拆分成字符数组，并为每个字符包裹。这将显著增加DOM元素的数量，对性能要求更高。
动画方向：本教程实现了从左到右的单词填充。如果需要其他方向或更复杂的动画效果（例如渐变填充），可能需要结合CSS linear-gradient和background-clip: text等高级CSS属性，并通过JavaScript动态调整其background-position。