Aller au contenu principal
Partagez cette démonstration :

Effet Parallaxe en CSS

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;

}






Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.