实现基于滚动进度的文本渐变高亮效果教程-js教程-PHP中文网

实现基于滚动进度的文本渐变高亮效果教程

本教程将详细指导如何利用JavaScript的滚动事件，实现文本内容根据页面滚动进度动态渐变高亮的效果。通过将页面滚动百分比映射到文本的词语数量，我们能创建出一种视觉上引人入胜的交互体验，使文本从左到右逐步被着色，并在反向滚动时逐渐取消高亮。文章将提供完整的HTML、CSS和JavaScript代码示例，并探讨相关实现细节和优化建议。

在现代网页设计中，交互式动画能够显著提升用户体验。其中一种引人注目的效果是文本内容根据用户的滚动行为进行动态高亮或着色。本教程将介绍如何利用简单的javascript和css，实现一个文本逐词高亮（或称“填充”）的效果，使其进度与页面滚动百分比相关联。当用户向下滚动时，文本会从左到右逐渐被着色；当向上滚动时，着色部分则会相应地减少。

核心概念

实现这一效果的核心思想是将页面的滚动进度（一个0到1之间的百分比）映射到文本中需要高亮的词语数量。具体步骤如下：

准备文本: 将一段长文本拆分成独立的词语。
初始化渲染: 将每个词语包裹在独立的标签中，以便单独控制其样式。
监听滚动事件: 注册window的scroll事件监听器。
计算滚动进度: 在滚动事件中，获取当前页面的滚动百分比。
动态更新样式: 根据滚动百分比计算出应高亮的词语数量，然后重新渲染文本，为相应数量的词语添加高亮样式。

HTML 结构

首先，我们需要一个基本的HTML页面结构，其中包含一个用于显示动态文本的容器。我们将使用一个元素作为文本的占位符。

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

登录后复制

这里，将是我们的目标元素，所有动态生成的文本内容都将注入到其中。

CSS 样式

为了使滚动效果可见，我们需要确保页面有足够的滚动空间。同时，我们还需要定义高亮文本的样式，并固定文本容器的位置，使其在滚动时始终可见。

body {
  /* 设置一个足够大的高度以产生滚动条 */
  height: 5000px;
  margin: 0; /* 移除默认外边距 */
  font-family: sans-serif;
}

.text {
  /* 固定文本容器位置，使其在滚动时保持在视口内 */
  position: fixed;
  top: 10px;
  left: 20px; /* 适当调整位置 */
  max-width: 80%; /* 防止文本过宽 */
  line-height: 1.6;
  color: #333; /* 默认文本颜色 */
}

.highlight {
  /* 定义高亮文本的颜色 */
  color: #f00; /* 醒目的红色 */
  font-weight: bold; /* 增加字体粗细 */
}

登录后复制

body { height: 5000px; }是关键，它确保了页面有足够的垂直空间来产生滚动条。.text { position: fixed; ... }则保证了我们的目标文本在用户滚动页面时能始终保持在视口顶部，方便观察效果。.highlight类定义了高亮文本的样式。

JavaScript 逻辑

JavaScript是实现动态效果的核心。它负责文本的拆分、初始化渲染、滚动监听和样式的动态更新。

1. 准备文本与初始化渲染

首先，定义我们的原始文本内容，并将其拆分成词语数组。然后，将每个词语包裹在标签中并插入到HTML中。

const HIGHLIGHT_CLASS = 'highlight'; // 定义高亮样式类名
const TEXT_CONTENT = "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_CONTENT.split(" "); // 将文本按空格拆分成词语数组
let textContainer = document.querySelector('.text'); // 获取文本容器元素

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

登录后复制

这里，TEXT_CONTENT是我们将要操作的文本。words.map(...)将每个词语转换为一个词语的字符串，然后join(' ')将它们连接起来，形成最终的HTML字符串并赋值给textContainer.innerHTML。

2. 计算滚动进度

我们需要一个函数来获取当前页面的滚动百分比（从0到1）。

/**
 * 获取页面滚动百分比 (0 到 1)
 * 来源: https://stackoverflow.com/a/8028584/2931840
 */
function getScrollFraction() {
    var docElem = document.documentElement,
        body = document.body,
        scrollTop = 'scrollTop',
        scrollHeight = 'scrollHeight';
    // 计算滚动条位置 / (整个可滚动高度 - 视口高度)
    return (docElem[scrollTop] || body[scrollTop]) / ((docElem[scrollHeight] || body[scrollHeight]) - docElem.clientHeight);
}

登录后复制

这个getScrollFraction函数是一个常用的工具函数，它通过计算当前滚动位置与总可滚动高度的比例来返回一个0到1之间的值，代表滚动进度。

3. 监听滚动事件并动态更新文本

最后，我们添加一个事件监听器来响应window的scroll事件。在每次滚动时，我们重新计算需要高亮的词语数量，并更新文本容器的HTML。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

window.addEventListener('scroll', () => {
  let scrollFraction = getScrollFraction(); // 获取当前滚动百分比
  // 根据滚动百分比和词语总数，计算应高亮的词语数量
  let wordsHighlightedCount = Math.floor(scrollFraction * words.length);

  // 重新渲染文本，为前wordsHighlightedCount个词语添加高亮类
  textContainer.innerHTML = words
    .map((word, index) => {
      // 如果当前词语的索引小于应高亮的数量，则添加高亮类
      return `<span ${index < wordsHighlightedCount ? `class="${HIGHLIGHT_CLASS}"` : ''}>${word}</span>`;
    })
    .join(' ');
});

登录后复制

在scroll事件监听器中：

getScrollFraction()获取当前滚动进度。
Math.floor(scrollFraction * words.length)计算出应该高亮的词语数量，确保是一个整数。
words.map(...)再次遍历所有词语。对于索引小于wordsHighlightedCount的词语，我们为其标签添加class="highlight"属性。
最终，更新textContainer.innerHTML，完成文本的动态高亮。

完整代码示例

将上述HTML、CSS和JavaScript代码分别保存为index.html、style.css和script.js，并在同一目录下，即可运行查看效果。

index.html:

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

登录后复制

style.css:

body {
  height: 5000px; /* 提供足够的滚动空间 */
  margin: 0;
  font-family: sans-serif;
  background-color: #f9f9f9;
}

.text {
  position: fixed; /* 固定文本位置 */
  top: 50px; /* 距离顶部 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平居中 */
  max-width: 700px; /* 限制文本宽度 */
  line-height: 1.8;
  font-size: 1.2em;
  color: #555; /* 默认文本颜色 */
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: justify;
}

.text span {
  transition: color 0.1s ease-out; /* 添加颜色过渡效果，使高亮更平滑 */
}

.highlight {
  color: #007bff; /* 高亮颜色 */
  font-weight: bold;
}

登录后复制

script.js:

const HIGHLIGHT_CLASS = 'highlight';
const TEXT_CONTENT = "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_CONTENT.split(" ");
let textContainer = document.querySelector('.text');

// 初始渲染文本
textContainer.innerHTML = words
  .map(w => `<span>${w}</span>`)
  .join(' ');

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

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

/**
 * 获取页面滚动百分比 (0 到 1)
 * 来源: https://stackoverflow.com/a/8028584/2931840
 */
function getScrollFraction() {
    var docElem = document.documentElement, 
        body = document.body,
        scrollTop = 'scrollTop',
        scrollHeight = 'scrollHeight';
    return (docElem[scrollTop] || body[scrollTop]) / ((docElem[scrollHeight] || body[scrollHeight]) - docElem.clientHeight);
}

登录后复制

注意事项与优化

性能考虑:
- 频繁的innerHTML更新: 每次滚动事件都会重新构建并赋值innerHTML，这对于包含大量词语的文本可能会导致性能问题，尤其是在旧浏览器或低性能设备上。这是因为每次更新都会导致浏览器重新解析HTML、构建DOM树并重新渲染。
- 优化方向: 可以考虑只更新需要改变样式的元素，而不是整个文本容器。例如，维护一个对所有词语元素的引用数组，然后只对需要添加或移除高亮类的元素进行操作。这会减少DOM操作的开销。
- 节流/防抖: 对于高频触发的scroll事件，可以引入节流（throttle）或防抖（debounce）机制，限制事件处理函数的执行频率，进一步优化性能。
滚动敏感度:
- 示例中body的高度设置为5000px，这决定了滚动条的长度和滚动速度对文本高亮进度的影响。body的高度越大，文本高亮的速度就越慢，用户需要滚动更多的距离才能完全高亮文本。反之，高度越小，高亮速度越快。根据实际需求调整body的高度来控制敏感度。
- 如果文本内容较短，可能需要进一步减小body高度以使高亮效果更明显。
“填充”与“高亮”:
- 本教程实现的是“逐词高亮”效果，即改变词语的color属性。如果需要实现更复杂的“文本填充”效果（例如，使用渐变背景作为填充，并裁剪文本），可能需要借助CSS mask、background-clip: text或SVG等更高级的技术。本例提供的是一种相对简单且兼容性较好的实现方式。
用户体验:
- 考虑为高亮效果添加CSS transition，例如在.text span上添加transition: color 0.1s ease-out;，可以使颜色变化更加平滑，提升视觉体验。
- 对于长文本，一次性高亮整个词语可能过于突兀。可以考虑更细粒度的控制，例如基于字符的高亮，但这会使代码更加复杂。

总结

通过结合HTML结构、CSS样式和JavaScript事件监听，我们成功实现了一个基于滚动进度的文本逐词高亮效果。这个技术的核心在于将页面滚动百分比与文本中词语的索引进行映射，从而动态地应用或移除高亮样式。虽然示例代码采用了一种简单直接的innerHTML更新方式，但在实际生产环境中，应根据性能要求考虑更精细的DOM操作优化。掌握这一技术，开发者可以为网页添加更多富有创意的交互式文本动画。

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