SO comunidad! Estoy tratando de hacer que un objeto se mueva en la misma fase que el desplazamiento usando la transformación CSS. El problema es que veo que la animación no es fluida. En cambio, es como si la caja estuviera parpadeando y 'saltando' todo el tiempo, y no puedo averiguar la causa.
¿Cómo puedo lograr este tipo de transformaciones de una manera fluida?
Dejaré mi código a continuación, así como un enlace codepen .
¡Gracias de antemano por su ayuda!
const container = document.querySelector('.container'); const box = document.querySelector('.box'); function animate() { transformBox(); requestAnimationFrame(animate); } function transformBox() { const scrollY = window.scrollY; box.style.transform = `translate3d(0, ${scrollY}px, 0)`; } animate(); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overscroll-behavior: none; } .container { position: relative; height: 400vh; background-color: #333; } .box { position: absolute; top: calc(50vh - 25px); left: calc(50% - 25px); width: 50px; height: 50px; background-color: white; border-radius: 8px; } <div class="container"> <div class="box"></div> </div>