Besoin d'aide bg Parallax

Mei741
Javascript
Les bases

Bonjour,
Je suis débutante en coding, désolée si je m'exprime un peu mal.

Je cherche à mettre en background de mon site un parallax avec des petites étoiles.
J'ai donc généré mon parallax qui n'est certainement pas le meilleur mais qui fonctionne tout à fait bien.

Néanmoins il ne prend pas toute la hauteur de mon site, comment faire ?
(j'ai mis une height à 500vh pour tester, mais il semble s'arrêter à la hauteur d'écran)

D'ailleurs <span> sur laquelle se trouve mon parallax décale le reste du contenu de mon site, comme si elle contenait la <span> uniquement. Comment faire pour qu'elle reste en bg ?

3ème question : est-il possible de mettre mon parallax sur <body>, et dans ce cas-là que dois-je remplacer dans mon html/css/js ?

   <style>
        span {
            height: 500vh;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        span.parallax {
            display: block;
        }
        .star {
            position: absolute;
            display: block;
        }
        .star img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        @keyframes noise {
            0% {
                transform: translate(5px, 10px);
            }
            10% {
                transform: translate(-5px, 15px);
            }
            30% {
                transform: translate(0px, 5px);
            }
            100% {
                transform: translate(5px, -5px);
            }
        }
        #stars {
            background: black;
        }
    </style>
</head>

<body>
    <span id="stars">
    </span>

<script>
    const starsspan = document.querySelector('#stars')
    let stars = '';
    for(let i = 0; i < 200; i++) {
        const left = Math.random() * window.innerWidth + 'px';
        const top = Math.random() * window.innerHeight + 'px';
        const size = 5 + Math.random() * 20;
        stars += `<span class="parallax star" data-speed="${size}" style="opacity:${size/100}; left:${left}; top:${top}; width:${size}px; height:${size}px;" ><img src="ressources/test-star.png"></span>`;
    }
    starsspan.innerHTML = stars;
    const spans = document.querySelectorAll('span');
    const spanList = [];
    spans.forEach(span => {
        spanList.push({
            span,
            parallax : span.querySelectorAll('.parallax')
        });
    })
    document.addEventListener('scroll', () => {
        spanList.forEach(item => {
            const infos = item.span.getBoundingClientRect();
            const offset = infos.y / infos.height;
            item.parallax.forEach(parallax => {
                const speed = parallax.dataset.speed || 1;
                const type = parallax.dataset.type || 'translate';
                const positionY = (offset * 200) * speed;
                if(type === 'translate') {
                    parallax.style.transform = 'translate(0,' + (positionY) + 'px)';
                }else if(type === 'rotate') {
                    parallax.style.transform = 'rotate(' + positionY + 'deg)';
                }else if(type === 'scale')  {
                    parallax.style.transform = 'scale(' + Math.abs(Math.max(positionY, .5)) + ')';
                }
            });
        });
    });
</script>
</body>

Aucune réponse