本教程將詳細指導(dǎo)如何利用JavaScript的滾動事件，實現(xiàn)文本內(nèi)容根據(jù)頁面滾動進度動態(tài)漸變高亮的效果。通過將頁面滾動百分比映射到文本的詞語數(shù)量，我們能創(chuàng)建出一種視覺上引人入勝的交互體驗，使文本從左到右逐步被著色，并在反向滾動時逐漸取消高亮。文章將提供完整的HTML、CSS和JavaScript代碼示例，并探討相關(guān)實現(xiàn)細節(jié)和優(yōu)化建議。

在現(xiàn)代網(wǎng)頁設(shè)計中，交互式動畫能夠顯著提升用戶體驗。其中一種引人注目的效果是文本內(nèi)容根據(jù)用戶的滾動行為進行動態(tài)高亮或著色。本教程將介紹如何利用簡單的JavaScript和CSS，實現(xiàn)一個文本逐詞高亮（或稱“填充”）的效果，使其進度與頁面滾動百分比相關(guān)聯(lián)。當用戶向下滾動時，文本會從左到右逐漸被著色；當向上滾動時，著色部分則會相應(yīng)地減少。

核心概念

實現(xiàn)這一效果的核心思想是將頁面的滾動進度（一個0到1之間的百分比）映射到文本中需要高亮的詞語數(shù)量。具體步驟如下：

1. 準備文本: 將一段長文本拆分成獨立的詞語。
2. 初始化渲染: 將每個詞語包裹在獨立的標簽中，以便單獨控制其樣式。
3. 監(jiān)聽滾動事件: 注冊window的scroll事件監(jiān)聽器。
4. 計算滾動進度: 在滾動事件中，獲取當前頁面的滾動百分比。
5. 動態(tài)更新樣式: 根據(jù)滾動百分比計算出應(yīng)高亮的詞語數(shù)量，然后重新渲染文本，為相應(yīng)數(shù)量的詞語添加高亮樣式。

HTML 結(jié)構(gòu)

首先，我們需要一個基本的HTML頁面結(jié)構(gòu)，其中包含一個用于顯示動態(tài)文本的容器。我們將使用一個元素作為文本的占位符。

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>滾動進度文本高亮</title>
  <link rel="stylesheet" href="style.css">


  <span class="text"></span>
  <script src="script.js"></script>

這里，將是我們的目標元素，所有動態(tài)生成的文本內(nèi)容都將注入到其中。

CSS 樣式

為了使?jié)L動效果可見，我們需要確保頁面有足夠的滾動空間。同時，我們還需要定義高亮文本的樣式，并固定文本容器的位置，使其在滾動時始終可見。

body {
  /* 設(shè)置一個足夠大的高度以產(chǎn)生滾動條 */
  height: 5000px;
  margin: 0; /* 移除默認外邊距 */
  font-family: sans-serif;
}

.text {
  /* 固定文本容器位置，使其在滾動時保持在視口內(nèi) */
  position: fixed;
  top: 10px;
  left: 20px; /* 適當調(diào)整位置 */
  max-width: 80%; /* 防止文本過寬 */
  line-height: 1.6;
  color: #333; /* 默認文本顏色 */
}

.highlight {
  /* 定義高亮文本的顏色 */
  color: #f00; /* 醒目的紅色 */
  font-weight: bold; /* 增加字體粗細 */
}

body { height: 5000px; }是關(guān)鍵，它確保了頁面有足夠的垂直空間來產(chǎn)生滾動條。.text { position: fixed; ... }則保證了我們的目標文本在用戶滾動頁面時能始終保持在視口頂部，方便觀察效果。.highlight類定義了高亮文本的樣式。

JavaScript 邏輯

JavaScript是實現(xiàn)動態(tài)效果的核心。它負責文本的拆分、初始化渲染、滾動監(jiān)聽和樣式的動態(tài)更新。

1. 準備文本與初始化渲染

首先，定義我們的原始文本內(nèi)容，并將其拆分成詞語數(shù)組。然后，將每個詞語包裹在標簽中并插入到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(" "); // 將文本按空格拆分成詞語數(shù)組
let textContainer = document.querySelector('.text'); // 獲取文本容器元素

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

這里，TEXT_CONTENT是我們將要操作的文本。words.map(...)將每個詞語轉(zhuǎn)換為一個詞語的字符串，然后join(' ')將它們連接起來，形成最終的HTML字符串并賦值給textContainer.innerHTML。

2. 計算滾動進度

我們需要一個函數(shù)來獲取當前頁面的滾動百分比（從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函數(shù)是一個常用的工具函數(shù)，它通過計算當前滾動位置與總可滾動高度的比例來返回一個0到1之間的值，代表滾動進度。

3. 監(jiān)聽滾動事件并動態(tài)更新文本

最后，我們添加一個事件監(jiān)聽器來響應(yīng)window的scroll事件。在每次滾動時，我們重新計算需要高亮的詞語數(shù)量，并更新文本容器的HTML。

window.addEventListener('scroll', () => {
  let scrollFraction = getScrollFraction(); // 獲取當前滾動百分比
  // 根據(jù)滾動百分比和詞語總數(shù)，計算應(yīng)高亮的詞語數(shù)量
  let wordsHighlightedCount = Math.floor(scrollFraction * words.length);

  // 重新渲染文本，為前wordsHighlightedCount個詞語添加高亮類
  textContainer.innerHTML = words
    .map((word, index) => {
      // 如果當前詞語的索引小于應(yīng)高亮的數(shù)量，則添加高亮類
      return `<span wordshighlightedcount :>${word}</span>`;
    })
    .join(' ');
});

在scroll事件監(jiān)聽器中：

• getScrollFraction()獲取當前滾動進度。
• Math.floor(scrollFraction * words.length)計算出應(yīng)該高亮的詞語數(shù)量，確保是一個整數(shù)。
• words.map(...)再次遍歷所有詞語。對于索引小于wordsHighlightedCount的詞語，我們?yōu)槠?span>標簽添加class="highlight"屬性。
• 最終，更新textContainer.innerHTML，完成文本的動態(tài)高亮。

完整代碼示例

將上述HTML、CSS和JavaScript代碼分別保存為index.html、style.css和script.js，并在同一目錄下，即可運行查看效果。

index.html:

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>滾動進度文本高亮</title>
  <link rel="stylesheet" href="style.css">


  <span class="text"></span>
  <script src="script.js"></script>

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);

  // 重新渲染文本，應(yīng)用高亮
  textContainer.innerHTML = words
  .map((word, index) => `<span wordshighlightedcount :>${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);
}

注意事項與優(yōu)化

1. 性能考慮:

   • 頻繁的innerHTML更新: 每次滾動事件都會重新構(gòu)建并賦值innerHTML，這對于包含大量詞語的文本可能會導(dǎo)致性能問題，尤其是在舊瀏覽器或低性能設(shè)備上。這是因為每次更新都會導(dǎo)致瀏覽器重新解析HTML、構(gòu)建DOM樹并重新渲染。
   • 優(yōu)化方向: 可以考慮只更新需要改變樣式的元素，而不是整個文本容器。例如，維護一個對所有詞語元素的引用數(shù)組，然后只對需要添加或移除高亮類的元素進行操作。這會減少DOM操作的開銷。
   • 節(jié)流/防抖: 對于高頻觸發(fā)的scroll事件，可以引入節(jié)流（throttle）或防抖（debounce）機制，限制事件處理函數(shù)的執(zhí)行頻率，進一步優(yōu)化性能。

2. 滾動敏感度:

   • 示例中body的高度設(shè)置為5000px，這決定了滾動條的長度和滾動速度對文本高亮進度的影響。body的高度越大，文本高亮的速度就越慢，用戶需要滾動更多的距離才能完全高亮文本。反之，高度越小，高亮速度越快。根據(jù)實際需求調(diào)整body的高度來控制敏感度。
   • 如果文本內(nèi)容較短，可能需要進一步減小body高度以使高亮效果更明顯。

3. “填充”與“高亮”:

   • 本教程實現(xiàn)的是“逐詞高亮”效果，即改變詞語的color屬性。如果需要實現(xiàn)更復(fù)雜的“文本填充”效果（例如，使用漸變背景作為填充，并裁剪文本），可能需要借助CSS mask、background-clip: text或SVG等更高級的技術(shù)。本例提供的是一種相對簡單且兼容性較好的實現(xiàn)方式。

4. 用戶體驗:

   • 考慮為高亮效果添加CSS transition，例如在.text span上添加transition: color 0.1s ease-out;，可以使顏色變化更加平滑，提升視覺體驗。
   • 對于長文本，一次性高亮整個詞語可能過于突兀?？梢钥紤]更細粒度的控制，例如基于字符的高亮，但這會使代碼更加復(fù)雜。

總結(jié)

通過結(jié)合HTML結(jié)構(gòu)、CSS樣式和JavaScript事件監(jiān)聽，我們成功實現(xiàn)了一個基于滾動進度的文本逐詞高亮效果。這個技術(shù)的核心在于將頁面滾動百分比與文本中詞語的索引進行映射，從而動態(tài)地應(yīng)用或移除高亮樣式。雖然示例代碼采用了一種簡單直接的innerHTML更新方式，但在實際生產(chǎn)環(huán)境中，應(yīng)根據(jù)性能要求考慮更精細的DOM操作優(yōu)化。掌握這一技術(shù)，開發(fā)者可以為網(wǎng)頁添加更多富有創(chuàng)意的交互式文本動畫。

以上是實現(xiàn)基於滾動進度的文本漸變高亮效果教程的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！