Turn a mouseover event into an autoscroll

Question

As part of the creation of an overlay, I got a code that is close to what I want to do, on codepen. This one displays a parallax of text on a background. But on the CodePen project, the motion animation is done on a mouseover event. I would like to make this animation happen automatically, over a period of ten seconds, without having to call a mouseover.

Here is the code in question

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

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


  
    
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM

Thank you in advance for your ideas! :)

n-- · Answer

It can be changed to run automatically with the requestAnimationFrame like this:

const position = document.documentElement;

let time = Date.now(), x = 0;

const move = () => {
  if (Date.now() - time > 10000)
    return;
  position.style.setProperty("--x", (x++) + "px");
  requestAnimationFrame(move);
};

move();

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


  
    
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM
      WGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COMWGRAPHISTE.COM

Turn a mouseover event into an autoscroll

1 Answers