Dernière modification : novembre 2022
Le code :
<body>
<div class="conteneur-parallax">
<div class="parallax etoiles">
<img src="etoiles.svg" alt="">
</div>
<div class="parallax lune">
<img src="lune.svg" alt="">
</div>
<div class="parallax montagnes">
<img src="montagnes.svg" alt="">
</div>
<div class="parallax vaisseau">
<img src="vaisseau.svg" alt="">
</div>
<div class="arbres">
<img src="arbres.svg" alt="">
<div class="background-bas"></div>
</div>
</div>
*,*::before,*::after{box-sizing: border-box;}
img{max-width:100%;display:block;}
body {
overflow: visible;
min-height: 100%;
margin-bottom: 0px;
background-color: #242220;
}
.conteneur-parallax {
-webkit-overflow-scrolling: touch;
perspective: 100px;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #030038;
transform-style: preserve-3d
}
.parallax {
height:100vh;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.vaisseau {
top: 250px;
z-index: 1;
transform: translateY(54px) translateZ(-50px) scale(1.5);
}
.vaisseau img {
max-width:40%;
margin:auto;
animation: vaisseau 2s infinite alternate
}
@keyframes vaisseau{
from{
transform: translatey(10px)
}
to{
transform: translatey(-10px)
}
}
.etoiles {
top: 2px;
z-index: 1;
height: 800px;
transform: translateY(-1200px) translateZ(-500px) scale(6);
}
.etoiles img {
max-width: 80%;
margin:auto
}
.lune {
display: flex;
justify-content: flex-end;
top: 30px;
z-index: 1;
transform: translateY(-50px) translateZ(-200px) scale(3);
}
.lune img {
width: 6vmax;
position: absolute;
top: 65px;
margin-right: 40px;
}
.montagnes {
transform-origin: 50% 0;
left: 0;
top: 650px;
right: 0;
bottom: 0;
z-index: 2;
transform: translateY(-100px) translateZ(-150px) scale(3);
}
.arbres {
position: absolute;
left: 0;
top: 600px;
right: 0;
bottom: 0;
z-index:3
}
.background-bas {
min-height: 2000px;
background-color: #121923;
}