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>