本教程详细介绍了如何将基于鼠标悬停事件的视差文本动画转换为平滑的自动滚动效果。通过替换传统的事件监听器，利用 `requestanimationframe` api优化动画性能，并结合javascript逻辑实现动画的持续更新和时长控制。文章提供了完整的代码示例，帮助开发者理解并实现高性能的web动画。
理解视差文本动画原理
在深入实现自动滚动之前，我们首先需要理解原始视差文本动画的工作原理。这个动画通过CSS和JavaScript的协同作用，创造出文本层叠和深度移动的视觉效果。
CSS 样式解析
原始的CSS代码定义了文本的视觉样式和动画行为：
-
CSS 变量 (--x, --i)：
- --x 是一个全局CSS变量，它由JavaScript动态控制，代表水平偏移量。
- --i 是通过HTML行内样式设置的，为每个
元素提供了不同的乘数，用于调整其视差强度。
- text-shadow 属性： text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1); 这行代码利用 --x 变量创建水平方向的文本阴影偏移。当 --x 变化时，阴影会随之移动，从而模拟出文本的深度和运动感。
-
transform 属性：
transform: translateX(calc(0% - var(--x) * var(--i))); 这行代码是实现视差效果的关键。它根据 --x 和 --i 变量计算文本的水平位移。由于每个
元素的 --i 值不同，它们会以不同的速度移动，从而产生经典的视差滚动效果。
- @keyframes animatecolor： 这是一个独立的CSS动画，负责文本颜色的周期性变化（filter: hue-rotate），与视差滚动是并行的。
原始 JavaScript 交互
原始的JavaScript代码非常简洁，其核心在于将用户鼠标的水平位置与CSS变量 --x 绑定：
const position = document.documentElement;
position.addEventListener("mousemove", (e) => {
position.style.setProperty("--x", e.clientX + "px");
});这段代码监听整个文档的 mousemove 事件。每当鼠标在页面上移动时，它就会获取鼠标当前的X坐标 (e.clientX)，并将其值赋给CSS变量 --x。这样，鼠标的移动直接驱动了CSS中定义的视差和阴影效果。
实现自动滚动动画
为了将上述鼠标事件驱动的动画转换为自动播放，我们需要一个机制来持续地、平滑地更新 --x 变量，而无需用户交互。requestAnimationFrame 是实现这一目标的理想选择。
多奥淘宝客程序免费版拥有淘宝客站点的基本功能，手动更新少，管理简单等优点，适合刚接触网站的淘客们，或者是兼职做淘客们。同样拥有VIP版的模板引擎技 术、强大的文件缓存机制，但没有VIP版的伪原创跟自定义URL等多项创新的搜索引擎优化技术，除此之外也是一款高效的API数据系统实现无人值守全自动 化运行的淘宝客网站程序。4月3日淘宝联盟重新开放淘宝API申请，新用户也可使用了
requestAnimationFrame 简介
requestAnimationFrame (rAF) 是浏览器提供的一个API，用于请求浏览器在下一次重绘之前执行一个动画帧。它的优势在于：
- 性能优化：浏览器会在最佳时机执行回调，通常与屏幕刷新率同步（例如60Hz），避免不必要的重绘和卡顿，从而提供更流畅的动画体验。
- 节约资源：当页面处于非活动状态（如最小化或切换到后台标签页）时，rAF 会暂停执行，从而节省CPU和电池资源。
- 避免丢帧：它确保动画在每一帧都平滑过渡，减少视觉上的跳动。
动画逻辑改造
我们将用一个循环函数配合 requestAnimationFrame 来逐步改变 --x 的值。具体步骤如下：
-
初始化变量：
- startTime: 记录动画开始的时间戳，用于控制动画的总时长。
- x: 一个计数器，用于生成递增的像素值，驱动水平滚动。
- 创建动画函数 move： 定义一个名为 move 的函数，该函数将作为 requestAnimationFrame 的回调。
- 动画时长控制： 在 move 函数的开头，通过比较当前时间 (Date.now()) 与 startTime 来判断动画是否已达到预设时长（例如10秒）。如果达到，则直接 return 停止函数的递归调用，从而结束动画。
- 更新 CSS 变量： 在 move 函数内部，递增 x 的值（x++），并将其作为像素值赋给 document.documentElement 的 --x CSS变量。这将驱动文本的水平移动。
- 递归调用 requestAnimationFrame： 在更新 --x 后，再次调用 requestAnimationFrame(move)，请求浏览器在下一帧继续执行 move 函数，从而实现动画的循环和连续播放。
- 启动动画： 在定义 move 函数之后，立即调用 move() 一次，以启动整个动画序列。
完整代码示例
以下是实现自动视差文本滚动效果的完整代码。
JavaScript (修改后的部分)
const position = document.documentElement;
// 记录动画开始时间，以及动画帧计数器x
let startTime = Date.now();
let x = 0; // 用于控制水平偏移的像素值
const move = () => {
// 检查动画是否已运行超过10秒 (10000毫秒)
if (Date.now() - startTime > 10000) {
return; // 动画结束，停止递归调用
}
// 更新CSS变量 --x，使文本产生水平移动
// x++ 使得每次调用时 x 值递增1，实现连续滚动
position.style.setProperty("--x", (x++) + "px");
// 请求浏览器在下一帧执行move函数，实现动画循环
requestAnimationFrame(move);
};
// 启动动画
move();CSS (保持不变)
@import url('https://fonts.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;
/* 关键的视差效果，依赖于 --x 变量 */
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;
}HTML (保持不变)
相关文章
CSS选择器 :not(:nth-child(1)) 的正确用法详解
如何正确使用 CSS 选择器为除首个子元素外的标签添加上边距
CSS Line Clamp 与首字母大写的兼容性解决方案
如何同时实现首字母大写与多行文本截断（Line Clamp）
CSS 实现首字母大写与多行截断的兼容性解决方案
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
