Creé un efecto de paralaje simple para una imagen de héroe:
https://jsfiddle.net/176ns5f3/
<header role="presentation" class="parallax"> </header> <article> </article> window.addEventListener("scroll", throttle(scroll, 15)); function throttle(fn, wait) { var time = Date.now(); return function () { if (time + wait - Date.now() < 0) { fn(); time = Date.now(); } }; } let parallax = document.querySelector(".parallax"); function scroll() { var currentScrollPos = window.pageYOffset; var coords = currentScrollPos * 0.5 + "px"; parallax.style.transform = "translate3d(0," + coords + ",0)"; }Funciona bien en mi computadora portátil i7, sin embargo, en dispositivos más antiguos es un poco tartamudo.
Creé mi propio js porque pensé que sería más eficiente, sin embargo, ¿no parece ser el caso?