首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > html教程

将鼠标事件驱动的视差文本动画改造为自动播放效果

小婷小哥_6903

小婷小哥_6903

2025-11-21

327人浏览

原创

将鼠标事件驱动的视差文本动画改造为自动播放效果

本教程详细介绍了如何将一个基于鼠标移动事件触发的视差文本动画转换为自动播放效果。通过利用javascript的requestanimationframe api，我们实现了在指定时间（例如10秒）内，文本元素自动进行水平滚动和视差位移，从而摆脱了对用户交互的依赖，创建出流畅且无需干预的动态视觉体验。

原始动画机制解析

在深入实现自动播放之前，我们首先理解原始的鼠标事件驱动视差动画是如何工作的。该动画通过JavaScript监听mousemove事件，动态更新一个CSS自定义属性--x，进而影响文本元素的text-shadow和transform属性，从而创建出视差效果。

HTML 结构：

<section><div class="text">
    <a href="https://wgraphiste.com" target="blank">
      <h2 style="--i:0.5">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <!-- 更多 h2 元素，带有不同的 --i 值 -->
    </a>
  </div>
</section>

HTML结构包含一个section作为容器，内部的div.text包含多个h2元素。每个h2元素通过内联样式定义了一个CSS自定义属性--i，这个变量在后续的CSS计算中用于控制视差效果的强度。

CSS 样式：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins";
  font-weight: 900;
}
section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #111;
}
.text {
  position: relative;
  transform: skewY(350deg) translateY(-200px);
  animation: animatecolor 5s linear infinite; /* 背景色调动画 */
}
@keyframes animatecolor {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.text h2 {
  position: relative;
  width: 100%;
  font-size: 8em;
  color: #fff;
  pointer-events: none;
  line-height: 1em;
  white-space: nowrap;
  /* 关键：使用 --x 和 --i 控制文本阴影和位移 */
  text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
  transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
  color: #0f0;
  margin: 0 10px;
}
.text h2 span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

CSS代码中，.text h2元素的text-shadow和transform: translateX属性是实现视差效果的关键。它们都依赖于--x变量，并通过calc()函数结合--i变量计算出不同的位移量，从而使不同行文本产生不同的滚动速度，形成视差感。

原始 JavaScript 逻辑：

const position = document.documentElement;
position.addEventListener("mousemove", (e) => {
  position.style.setProperty("--x", e.clientX + "px");
});

这段JavaScript代码监听了整个文档的mousemove事件。每当鼠标移动时，它会获取鼠标的X坐标（e.clientX），并将其值设置为根元素（document.documentElement）上的CSS自定义属性--x。这样，--x的值会实时跟随鼠标的水平移动而变化，驱动CSS动画。

转换为自动播放动画

要将这种鼠标事件驱动的动画转换为自动播放，我们需要用一个程序化的方式来模拟--x变量的连续变化，而不是依赖鼠标输入。requestAnimationFrame API是实现平滑、高效动画的最佳选择。

requestAnimationFrame 简介

requestAnimationFrame是浏览器提供的一个API，它会告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的更新函数。相比于setTimeout或setInterval，它的优势在于：

JavaScript 测试模式
JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载
  • 性能优化： 浏览器会在最佳时机（通常是显示器刷新率）调用回调函数，确保动画流畅且不会过度消耗CPU。
  • 节能： 当页面不在活动标签页时，动画会自动暂停，节省电量。
  • 同步： 确保动画与其他浏览器渲染操作同步，避免画面撕裂。

重构 JavaScript 代码

我们将修改JavaScript部分，使用requestAnimationFrame来自动更新--x变量，并设置一个动画持续时间。

const position = document.documentElement; // 获取根元素，用于设置CSS变量

let startTime = Date.now(); // 记录动画开始时间
let xValue = 0;             // 用于累加的 x 坐标值

const animateScroll = () => {
  // 检查动画是否已持续 10 秒（10000 毫秒）
  if (Date.now() - startTime > 10000) {
    return; // 动画结束，停止递归调用
  }

  // 更新 --x CSS变量，每次增加 1px
  // xValue++ 会使文本向右滚动，如果需要向左滚动，可以使用 xValue--
  position.style.setProperty("--x", (xValue++) + "px");

  // 请求浏览器在下一次重绘前再次调用 animateScroll 函数
  requestAnimationFrame(animateScroll);
};

// 启动动画
animateScroll();

代码解释：

  1. startTime = Date.now();: 记录动画开始的精确时间戳。
  2. xValue = 0;: 初始化一个变量xValue，它将作为自动滚动的X坐标值。
  3. animateScroll() 函数:
    • if (Date.now() - startTime > 10000): 这是动画持续时间的控制逻辑。当当前时间与startTime之差超过10000毫秒（即10秒）时，函数返回，停止requestAnimationFrame的递归调用，动画自然结束。
    • position.style.setProperty("--x", (xValue++) + "px");: 这是核心动画逻辑。每次animateScroll被调用时，xValue会递增，并将当前值设置为CSS变量--x。xValue++实现的是向右滚动的效果；如果需要向左滚动，可以改为xValue--。
    • requestAnimationFrame(animateScroll);: 关键步骤。它告诉浏览器在下一次屏幕刷新时再次调用animateScroll函数，从而形成一个连续的动画循环。
  4. animateScroll();: 在脚本加载后立即调用一次animateScroll，启动整个动画过程。

完整的代码示例

为了方便测试和理解，以下是完整的HTML、CSS和修改后的JavaScript代码：

HTML (不变)

<section><div class="text">
    <a href="https://wgraphiste.com" target="blank">
      <h2 style="--i:0.5">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:1.5">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:2.5">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:2.25">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:1.25">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:0.25">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:3">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:1.25">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
      <h2 style="--i:1.75">
<span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span>
</h2>
    </a>
  </div>
</section>

CSS (不变)

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins";
  font-weight: 900;
}
a {
  text-decoration: none;
}
section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #111;
}
.text {
  position: relative;
  transform: skewY(350deg) translateY(-200px);
  animation: animatecolor 5s linear infinite;
}
@keyframes animatecolor {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.text h2 {
  position: relative;
  width: 100%;
  font-size: 8em;
  color: #fff;
  pointer-events: none;
  line-height: 1em;
  white-space: nowrap;
  text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
  transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
  color: #0f0;
  margin: 0 10px;
}
.text h2 span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

JavaScript (修改后)

const position = document.documentElement;

let startTime = Date.now(); // 记录动画开始时间
let xValue = 0;             // 用于累加的 x 坐标值

const animateScroll = () => {
  // 检查动画是否已持续 10 秒（10000 毫秒）
  if (Date.now() - startTime > 10000) {
    return; // 动画结束，停止递归调用
  }

  // 更新 --x CSS变量，每次增加 1px
  position.style.setProperty("--x", (xValue++) + "px");

  // 请求浏览器在下一次重绘前再次调用 animateScroll 函数
  requestAnimationFrame(animateScroll);
};

// 启动动画
animateScroll();

注意事项与优化

  • 动画持续时间： 要修改动画的持续时间，只需调整if (Date.now() - startTime > 10000)中的数字。例如，改为20000即为20秒。
  • 动画速度与方向：
    • 速度： 调整xValue++的增量可以改变滚动速度。例如，xValue += 2会使滚动速度加倍。
    • 方向： 将xValue++改为xValue--可以使文本向左滚动。
  • 无限循环动画： 如果希望动画无限循环，只需移除时间限制的if语句即可：
    const animateScroll = () => {
  position.style.setProperty("--x", (xValue++) + "px");
  requestAnimationFrame(animateScroll);
};
animateScroll();
  • 性能考量： requestAnimationFrame本身就是为高性能动画设计的。对于更复杂的动画，应避免在回调函数中执行耗时的DOM操作或复杂计算。
  • 兼容性： requestAnimationFrame在现代浏览器中广泛支持。对于老旧浏览器，可能需要添加polyfill，但这在当前前端开发中已不常见。
  • CSS变量的灵活性： 本案例充分展示了CSS自定义属性（CSS变量）与JavaScript结合的强大之处。通过JavaScript动态更新CSS变量，可以实现高度灵活且性能优异的动态样式效果。

总结

通过本教程，我们成功地将一个依赖用户鼠标事件的视差文本动画，改造为一个完全自动播放的动画效果。核心在于利用requestAnimationFrame API来平滑、高效地更新CSS自定义属性--x，从而驱动CSS中的text-shadow和transform属性变化。这种方法不仅实现了动画的自动化，还保证了动画的流畅性和性能，为创建无需用户干预的动态网页元素提供了有效的解决方案。

相关文章

如何修复移动端滚动时背景错位导致的布局问题

如何在 React 应用中正确显示 react-leaflet 地图

Selenium 元素定位进阶：精准匹配指定子元素数量的容器

如何在固定画框内实现图片轮播（Carousel）

如何在固定画框内实现图片轮播（Carousel）效果
驱动精灵
驱动精灵

驱动精灵基于驱动之家十余年的专业数据积累，驱动支持度高，已经为数亿用户解决了各种电脑驱动问题、系统故障，是目前有效的驱动软件，有需要的小伙伴快来保存下载体验吧！

下载

相关标签:

css javascript java html 前端 浏览器 回调函数 显示器 前端开发 google

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：高效管理PHP滑块页面重定向后的状态：保持当前滑块可见

下一篇：为动态生成元素设置独立悬停提示：JavaScript对象与Map的应用

作者最新文章

Quarto HTML 布局定制：实现 20%–60%–20% 响应式三区网格

如何在 Cypress 测试中逻辑比对 HTML 结构（而非字节级匹配）

如何在 Cypress 测试中逻辑比对 HTML 结构（忽略空白与格式差异）

如何正确配置 HTML 与 JS 分离目录下的脚本引用路径

如何正确配置 HTML 与 JS 分离目录下的静态资源路径

如何实现水平滚动容器中的图片懒加载

Bootstrap 4.3 响应式失效的常见原因与修复方案

Bootstrap 4.3 响应式布局失效的常见原因与修复方案

如何在 Python 与 HTML 之间建立同步、实时的单向数据推送通道

如何修复移动端滚动时背景错位导致的布局问题

热门AI工具

更多
DeepSeek

DeepSeek

 豆包大模型

豆包大模型

 火山引擎

火山引擎

Hot Laper

Laper

Hot PixTV

PixTV

Hot 立刻MV

立刻MV

Hot 二狗PPT

二狗PPT

Hot 切问学术

切问学术

Hot

相关专题

更多
DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel，表示文件对象模型，是w3c组织推荐的处理可扩展置标语言的标准编程接口；dom是html文档的内存中对象表示，它提供了使用javascript与网页交互的方式。想了解更多的相关内容，可以阅读本专题下面的文章。

2024.08.14

6541

7

CSS position定位有几种方式
CSS position定位有几种方式

有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。

2023.11.23

352

4

PHP 高并发与性能优化
PHP 高并发与性能优化

本专题聚焦 PHP 在高并发场景下的性能优化与系统调优，内容涵盖 Nginx 与 PHP-FPM 优化、Opcode 缓存、Redis/Memcached 应用、异步任务队列、数据库优化、代码性能分析与瓶颈排查。通过实战案例（如高并发接口优化、缓存系统设计、秒杀活动实现），帮助学习者掌握 构建高性能PHP后端系统的核心能力。

2025.10.16

20893

17

PHP 数据库操作与性能优化
PHP 数据库操作与性能优化

本专题聚焦于PHP在数据库开发中的核心应用，详细讲解PDO与MySQLi的使用方法、预处理语句、事务控制与安全防注入策略。同时深入分析SQL查询优化、索引设计、慢查询排查等性能提升手段。通过实战案例帮助开发者构建高效、安全、可扩展的PHP数据库应用系统。

2025.11.13

473

15

JavaScript 性能优化与前端调优
JavaScript 性能优化与前端调优

本专题系统讲解 JavaScript 性能优化的核心技术，涵盖页面加载优化、异步编程、内存管理、事件代理、代码分割、懒加载、浏览器缓存机制等。通过多个实际项目示例，帮助开发者掌握 如何通过前端调优提升网站性能，减少加载时间，提高用户体验与页面响应速度。

2025.12.30

348

20

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

363

20

宝塔面板Nginx性能优化与高并发配置实践
宝塔面板Nginx性能优化与高并发配置实践

本专题围绕宝塔环境下的 Nginx 优化展开，深入讲解缓存策略、连接数调优、Gzip 压缩、静态资源加速及反向代理配置。帮助用户提升网站访问速度与并发处理能力。

2026.03.25

1256

29

宝塔面板数据库管理与MySQL性能优化实践
宝塔面板数据库管理与MySQL性能优化实践

本专题围绕宝塔面板中的数据库管理功能展开，系统讲解 MySQL 安装配置、数据库创建与权限管理、慢查询分析及性能优化方法。内容涵盖索引优化、连接数调优、缓存机制配置以及数据库备份策略。通过实操讲解，帮助开发者提升数据库运行效率与稳定性。

2026.04.07

285

24

PHP 命令行脚本与自动化任务开发
PHP 命令行脚本与自动化任务开发

本专题系统讲解 PHP 在命令行环境（CLI）下的开发与应用，内容涵盖 PHP CLI 基础、参数解析、文件与目录操作、日志输出、异常处理，以及与 Linux 定时任务（Cron）的结合使用。通过实战示例，帮助开发者掌握使用 PHP 构建 自动化脚本、批处理工具与后台任务程序 的能力。

2025.12.13

526

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MDN CSS 文档与布局指南
MDN CSS 文档与布局指南

共0课时 | 0人学习

TailwindCSS新版快速上手 | v3 v4对比
TailwindCSS新版快速上手 | v3 v4对比

共0课时 | 0人学习

Tailwind CSS 官方文档与安装指南
Tailwind CSS 官方文档与安装指南

共0课时 | 0人学习

最新文章

更多
如何修复移动端滚动时背景错位导致的布局问题
如何在 Python 与 HTML 之间建立同步、实时的单向数据推送通道
Bootstrap 4.3 响应式布局失效的常见原因与修复方案
Bootstrap 4.3 响应式失效的常见原因与修复方案
如何实现水平滚动容器中的图片懒加载
如何正确配置 HTML 与 JS 分离目录下的静态资源路径
如何正确配置 HTML 与 JS 分离目录下的脚本引用路径
如何在 Cypress 测试中逻辑比对 HTML 结构（忽略空白与格式差异）
如何在 Cypress 测试中逻辑比对 HTML 结构（而非字节级匹配）
Quarto HTML 布局定制：实现 20%–60%–20% 响应式三区网格