将mousemove触发的文本视差动画改为10秒自动滚动

问题说明 #

原代码通过鼠标移动事件触发文本视差效果，现需修改为无需鼠标操作、以10秒为周期自动运行的动画。

修改后的完整代码 #

JavaScript #

const position = document.documentElement;
const windowWidth = window.innerWidth;
let startTime = null;
const cycleDuration = 10000; // 10秒循环周期

function animateX(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = (elapsed % cycleDuration) / cycleDuration;
  // 实现从左到右再返回的往复动画
  const x = progress < 0.5 ? progress * 2 * windowWidth : (1 - progress) * 2 * windowWidth;
  position.style.setProperty("--x", `${x}px`);
  requestAnimationFrame(animateX);
}

requestAnimationFrame(animateX);

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

HTML #

<section>
  <div class="text">
    <a href="#" 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>

关键修改说明 #

• 移除原代码中mousemove事件监听，改用requestAnimationFrame实现浏览器原生支持的平滑动画
• 设置10秒为一个完整循环周期，通过计算动画进度值，让--x变量在0到窗口宽度之间往复变化，模拟鼠标左右移动的效果
• 保留原有的文本颜色渐变和视差偏移逻辑，保证视觉效果一致

内容的提问来源于stack exchange，提问作者Sagaroth