Estoy tratando de hacer una vuelta de paralaje como este enlace .

Hasta ahora he hecho esto, pero no puedo hacer que las capas se desplacen, aquí está el enlace a mi enlace de código.

También tengo errores como que el menú desplegable (el ícono del rayo) está detrás de la parte posterior y el encabezado no se corrige cuando se desplaza.

¿Alguien puede enviar un tutorial sobre cómo hacer este paralaje específico o corregir mi código? Gracias.

Aquí está el código de paralaje:

HTML:

 <img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png" alt="Image error."> <img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png" alt="Image error."> <img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png" alt="Image error."> <img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png" alt="Image error."> <img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png" alt="Image error."> <img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png" alt="Image error.">

CSS:

 body { height: 2000px; background: black; } .scene { position: absolute; width: 100%; transform: translateY(var(--translateY)); will-change: transform; }

JavaScript:

 document.querySelectorAll('.scene').forEach((elem) => { const modifier = elem.getAttribute('data-modifier') basicScroll.create({ elem: elem, from: 0, to: 519, direct: true, props: { '--translateY': { from: '0', to: `${ 10 * modifier }px` } } }).start() })