使用 requestAnimationFrame 实现自动视差文本滚动动画-html教程-PHP中文网

使用 requestAnimationFrame 实现自动视差文本滚动动画

DDD

发布： 2025-11-21 10:56:30

原创

894人浏览过

使用 requestAnimationFrame 实现自动视差文本滚动动画

本教程详细介绍了如何将基于鼠标悬停事件的视差文本动画转换为平滑的自动滚动效果。通过替换传统的事件监听器，利用 `requestanimationframe` api优化动画性能，并结合javascript逻辑实现动画的持续更新和时长控制。文章提供了完整的代码示例，帮助开发者理解并实现高性能的web动画。

理解视差文本动画原理

在深入实现自动滚动之前，我们首先需要理解原始视差文本动画的工作原理。这个动画通过CSS和JavaScript的协同作用，创造出文本层叠和深度移动的视觉效果。

CSS 样式解析

原始的CSS代码定义了文本的视觉样式和动画行为：

CSS 变量 (--x, --i)：
- --x 是一个全局CSS变量，它由JavaScript动态控制，代表水平偏移量。
- --i 是通过HTML行内样式设置的，为每个 <h2> 元素提供了不同的乘数，用于调整其视差强度。
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 变量计算文本的水平位移。由于每个 <h2> 元素的 --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 是实现这一目标的理想选择。

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

查看详情

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 (保持不变)

<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>WGRAPH

登录后复制

以上就是使用 requestAnimationFrame 实现自动视差文本滚动动画的详细内容，更多请关注php中文网其它相关文章！