Quiero construir un efecto de paralaje de desplazamiento lateral con 3 imágenes superpuestas diferentes que se mueven a diferentes velocidades, mi código para esto es el siguiente:
<div class="parallax-wrapper"> <div class="parallax1 parallax"></div> <div class="parallax2 parallax"></div> <div class="parallax3 parallax"></div> </div> .parallax-wrapper { width: 100%; height: 100%; background-color: black; } .parallax { position: fixed; display: inline-block; width: 500%; height: 100%; left: 0; background-size: auto 100%; } .parallax1 { background-image: url("../assets/Parallax/Parallax1.svg"); } .parallax2 { background-image: url("../assets/Parallax/Parallax2.svg"); } .parallax3 { background-image: url("../assets/Parallax/Parallax3.svg"); }y esta función que se llama en scroll:
function updateScroll(scrollDest){ parallax1.style.setProperty("left", "-" + (scrollDest * 0.3) + "px") parallax2.style.setProperty("left", "-" + (scrollDest * 0.2) + "px") parallax3.style.setProperty("left", "-" + (scrollDest * 0.1) + "px") }He hecho esto de manera diferente antes, lo que funcionó pero tenía poca compatibilidad con el navegador, así que lo cambié a este método que pensé que era muy liviano pero, lamentablemente, es muy lento en el móvil y tampoco es muy fluido en mi PC de escritorio, ¿por qué este método es tan lento? y como mejorarlo?
Supongo que probablemente acaba de agregar un detector de eventos a la window en el desplazamiento, lo que hace que se llame a updateScroll en cada evento de desplazamiento. Sugeriría usar la aceleración y la eliminación de rebotes para reducir la cantidad de eventos (un gran ejemplo que puede encontrar en otra pregunta de la pila " Acelerador simple en JavaScript ".
Después de reducir la cantidad de eventos, será un poco extraño, por lo que sugiero agregar también una transición a la izquierda como esta:
.parallax { transition: left .2s; }