Encontré este fragmento en línea y estoy buscando modificarlo ligeramente.

 const scrollText = document.querySelector(".scroll-text"); window.addEventListener("scroll", () => { scrollText.style.left = `${1000 - 1.5 * scrollY}px`; });

En este momento, tengo un encabezado rodando desde el lado derecho de la pantalla hacia el lado izquierdo, y funciona sin problemas.

Sin embargo, lo que idealmente querría es que el texto se detuviera en el centro de la pantalla, cuando el usuario también se desplazó hacia un punto determinado de la página.

¿Podría alguien amablemente decirme cómo haría para implementar algo como esto?

Aquí está mi HTML y CSS también por si acaso.

HTML:

 <div class="test"> <div class="main wrapper"> <h1 class="scroll-text">I'm going too far!</h1> </div> </div>

CSS:

 .test { background: #ffffff; color: #000000; overflow-x: hidden; } .wrapper { position: relative; width: 1150px; min-height: 50vh; margin: 0 auto; } .main { display: flex; justify-content: center; align-items: center; flex-direction: column; } .main .scroll-text { position: relative; font-size: 5rem; white-space: nowrap; scroll-snap-align: center; }