Tengo una animación bastante simple con un solo elemento, pero cuando me desplazo, resulta bastante lenta, aunque uso requestAnimationFrame() y transform property en lugar de top/left. ¿Cuál es el problema con mi código?
var floating = document.getElementsByClassName('floating'); function moveFloating(offset) { for (let i = 0; i < floating.length; i++) { floating[i].style.transform = 'translate(0px, ' + offset +'px)'; } } function loop() { let scrollOffset = window.scrollY; moveFloating(scrollOffset); requestAnimationFrame(loop); } requestAnimationFrame(loop); html, body { height: 100%; width: 100%; margin: 0 0; padding: 0; font-family: 'Courier New', Courier, monospace; } .frame { height: auto; width: 100%; position: relative; box-sizing: border-box; padding: 50px; } .static { width: 30%; } .floating { position: absolute; margin-left: auto; margin-right: auto; top: 50px; left: 0; right: 0; text-align: center; } <body> <div class="container"> <div class="frame"> <p class="static"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et volutpat tortor. Phasellus dignissim euismod ante, vel vulputate sapien vehicula dapibus. Phasellus sollicitudin est ac neque interdum, non vulputate augue efficitur. In feugiat convallis nunc. Etiam at luctus erat. Pellentesque in scelerisque tortor, vitae sodales lorem. Morbi vitae maximus massa. Donec aliquet dolor neque, porta tristique massa efficitur id. Ut ac odio justo. Maecenas accumsan justo id turpis lobortis vulputate. Aliquam ut sapien purus. Vestibulum vel sagittis purus. Quisque et gravida odio. Curabitur pretium lacinia nunc, nec dignissim lacus tristique sed. Vivamus ligula mi, interdum id hendrerit eget, posuere quis neque. Nulla eu eleifend arcu. </p> <h2 class="floating">Floating text</h2> </div> </div> <script src="script.js"></script> </body>Los detectores de eventos funcionan mejor que requestNextAnimationFrame , por lo que es mejor agregar un detector de eventos para un evento de desplazamiento. Gracias a @CasperKuethe