本文详解如何通过 javascript 和 css 实现“滚动时逐字改变文本颜色”的交互动画效果，模拟 polestar 官网中“precision”章节的文字渐变行为，包含 dom 字符拆分、滚动锁定、时间节流与样式过渡等核心技巧。
本文详解如何通过 javascript 和 css 实现“滚动时逐字改变文本颜色”的交互动画效果，模拟 polestar 官网中“precision”章节的文字渐变行为，包含 dom 字符拆分、滚动锁定、时间节流与样式过渡等核心技巧。
在高端品牌官网（如 Polestar）中，常出现一种精致的视差式文字动画：当用户向下滚动至特定区域时，段落文字不再整体切换颜色，而是以字符为单位，逐个从默认色（如白色）平滑过渡为目标色（如 rgb(211, 188, 141)），同时该区域保持“粘性定位”，直至所有字符着色完成才释放滚动。这种效果兼顾视觉节奏感与交互控制力，但实现需协调 DOM 操作、滚动监听、性能优化与 CSS 动画。
以下是一个轻量、可复用、无依赖的纯原生实现方案：
✅ 核心思路三步走
-
预处理文本：将每个带 .stickyColor 类的
或 内容拆分为独立 包裹的单字符；
- 滚动触发粘性锁定：当元素顶部进入视口（例如距顶部 100px）时，记录当前滚动位置并锁定滚动（防止跳动），同时标记该元素为“正在着色”；
- 逐帧着色 + 节流控制：在滚动事件中，按时间间隔（如 50ms）依次为未着色的字符添加 .newColor 类，利用 CSS transition 实现平滑变色；全部完成后自动解除锁定。
? 完整代码示例
HTML（置于 底部或使用 defer）
<p>Please scroll down...</p> <p class="stickyColor">Hello there! Nice to see you!</p> <p class="stickyColor">Let's play a game of colors...</p> <p class="stickyColor">Goodbye everyone! That's all.</p> <div class="big"></div> <!-- 占位滚动空间 -->
CSS（关键样式）
body {
background-color: #000;
margin: 20px 30px;
color: #fff;
font-family: 'Verdana', sans-serif;
}
.stickyColor {
margin-top: 200px;
transition: color 1s;
}
.stickyColor span {
color: #fff;
transition: color 0.1s ease-out; /* 快速响应，避免拖影 */
}
.stickyColor span.newColor {
color: rgb(192, 143, 35); /* 示例目标色，可替换为 rgb(211, 188, 141) */
}
.big {
height: 1200px;
}JavaScript（推荐置于 前）
// 配置项：可按需调整
const STICKY_TOP_OFFSET = 100; // 元素距视口顶部多少像素时触发粘性
const MIN_COLOR_INTERVAL_MS = 50; // 相邻字符着色最小时间间隔（防过快）
// 关键状态变量
let lockedAt = null; // 锁定的 scrollTop 值（null 表示未锁定）
let lockedSticky = null; // 当前正在着色的 DOM 元素
let lastColorTime = 0; // 上次着色时间戳
// 【步骤1】预处理：将每个 .stickyColor 文本拆分为字符级 span
document.querySelectorAll('.stickyColor').forEach(el => {
const chars = el.textContent.trim().split('');
el.innerHTML = chars.map(c => `<span>${c}</span>`).join('');
});
// 【步骤2+3】主滚动逻辑
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
// ✅ 若已锁定：仅处理着色 + 防止向下滚动越界
if (lockedAt !== null) {
// 强制维持锁定位置（视觉上“卡住”）
if (scrollY > lockedAt) {
window.scrollTo(0, lockedAt);
}
// 检查是否满足着色条件：向下滚动 & 时间间隔达标
if (scrollY > lockedAt && Date.now() - lastColorTime >= MIN_COLOR_INTERVAL_MS) {
// 查找首个未着色的 span
const targetSpan = lockedSticky.querySelector('span:not(.newColor)');
if (targetSpan) {
targetSpan.classList.add('newColor');
lastColorTime = Date.now();
} else {
// 所有字符已完成着色 → 解锁
lockedAt = null;
lockedSticky = null;
}
}
return; // 已锁定，跳过后续检测
}
// ✅ 若未锁定：遍历所有 .stickyColor，寻找首个应触发粘性的元素
document.querySelectorAll('.stickyColor').forEach(el => {
const rect = el.getBoundingClientRect();
// 元素顶部进入视口上方 STICKY_TOP_OFFSET 区域，且尚未锁定
if (rect.top < STICKY_TOP_OFFSET && !el.classList.contains('locked')) {
lockedAt = scrollY;
lockedSticky = el;
el.classList.add('locked');
// ⚠️ 注意：此处不立即着色，等待下一次 scroll 触发
}
});
});⚠️ 关键注意事项
- 执行时机：JS 必须在 DOM 加载完毕后运行。若置于 ，请包裹在 DOMContentLoaded 事件中；更推荐直接放在 前。
- 性能优化：使用 Date.now() 节流替代 requestAnimationFrame 简化逻辑，已足够应对常规场景；高频滚动下可进一步添加 throttle 封装。
- 无障碍兼容：字符拆分不影响屏幕阅读器读取（ 为内联语义容器），但建议为 .stickyColor 添加 aria-live="polite" 以提示动态内容更新。
- 样式扩展性：.newColor 类可定义任意 CSS 属性（如 opacity、transform），不仅限于 color，轻松拓展为逐字淡入、缩放等复合动画。
- 多实例支持：当前逻辑天然支持多个 .stickyColor 元素按顺序依次触发，无需额外配置。
✅ 效果验证与调试建议
- 打开浏览器开发者工具 → “Rendering” 面板 → 勾选 “FPS Meter”，确认滚动帧率稳定；
- 在控制台打印 lockedAt 和 lockedSticky 值，验证锁定位置是否符合预期；
- 修改 MIN_COLOR_INTERVAL_MS 观察节奏变化，找到视觉舒适与性能的平衡点。
通过以上实现，你已掌握一种专业级滚动驱动文字动画的核心范式——它不止于“炫技”，更是对用户注意力引导、内容节奏控制与前端工程严谨性的综合体现。
