I am trying to make a parallax back round like this one link.

So far I've made this but I can't get the layers to scroll, here is the link to my code link.

I am also having bugs like the drop down menu (the lightning icon) is behind the back round and the header isn't fixed when scrolling.

Can anyone please send a a tutorial on how to do this specific parallax back round or fix my code, thank you.

Here is the parallax code:

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()
        
})