Así que estoy tratando de convertir el tutorial de algunos chicos de una animación que se mueve cuando el mouse se mueve para moverse cuando se desplaza hacia abajo. ahora se está moviendo, pero solo cuando muevo el mouse y me desplazo al mismo tiempo.
Estoy buscando un método que mueva las palabras cuando solo se desplaza
<section id="bbbb"> <div class="text"> <h2 style="--i:0.5"><span> because boring is bad for business</span> </h2></div> </section> const position = document.documentElement; position.addEventListener('mousewheel', e => { position.style.setProperty('--x', e.clientX + 'px')})
.text h2 { position: relative; width: 100%; font-size: 6.5em; color: rgb(255, 255, 255); line-height: 1em; white-space: nowrap; text-shadow: calc(var(--x)) 100px 0 rgba(255, 255,255,0.2); transform: translateX(calc(0% - var(--x)*var(--i))); }tu javascript será así
const element = document.querySelector("#container"); element.addEventListener('wheel', (event) => { event.preventDefault(); element.scrollBy({ left: event.deltaY < 0 ? -30 : 30, }); }); #container { display: flex; overflow-x: scroll; overflow-y:hidden; max-width: 50rem; margin: 0 auto; } .text h2 { position: relative; width: 100%; font-size: 6.5em; color: black; line-height: 1em; white-space: nowrap; text-shadow: calc(var(--x)) 100px 0 rgba(255, 255,255,0.2); transform: translateX(calc(0% - var(--x)*var(--i))); } <div id="container"> <section id="bbbb"> <div class="text"> <h2 style="--i:0.5"><span> because boring is bad for business</span> </h2></div> </section> </div>