Twitter
Partagez cette démonstration : Twitter

Effet Parallaxe en CSS

Dernière modification : juin 2022

Le code :



<header id="title" class="slide">
<h1>Démonstration Parallaxe en CSS</h1>
</header>
<div id="slide1" class="slide">
<img src="image" alt> 
</div>
<div id="slide2" class="slide">
<div class=backdrop><p>...</p></div>
</div>
<div id="slide3" class="slide">
<img src="image.jpg">
<img src="image.jpg"> 
</div>
<div id="slide4" class="slide">
</div>  




*,*::before,*::after{box-sizing: border-box;}	

img{max-width:100%;display:block;height:auto}
	
html {
height: 100vh;
overflow: hidden;
}

body { 

margin: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;

}
	
header {
	
display: grid;
	
}
	
#title {
	
background: url("image.jpg") no-repeat center/cover fixed;
z-index:1
	
}


h1 {
	
place-self: center;
font-size: 4vmax;
color: #fff;
text-shadow: 0 2px 2px #000;
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%
	
}



.slide {

position: relative;
min-height: 100vh;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit
	
}
	
	
.slide::before {
	
content:"";
position: absolute;
top: 0;
bottom: 0;
left: -20px;
right: 0;

	
}
	
	
#slide1 img{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%)
		
}
	
#slide1::before {
	
background: url("image.jpg") no-repeat center/cover fixed;
transform: translateZ(-1px) scale(2)
	
}

#slide2 {
	
display:grid;
background: url("image.jpg") no-repeat center/cover fixed;
z-index:1
	
}
	
#slide2 .backdrop{
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border: 1px solid hsla(0, 0%, 100%, 0.2);
padding: .5rem;
border-radius: 4px;
place-self: center;
width: min(600px, 100%);
aspect-ratio: 3/2;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
font-size: clamp(1rem,(1rem + 2vw),1.5rem);
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
	
	}
	

#slide3 img {
	
position: absolute;
top: 50%;
left: 50%;
width: 320px;
aspect-ratio:3/2;

padding: 10px;
border-radius: 5px;
background: white;
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
	
	
#slide3 img:first-of-type{

transform: translateZ(.25px) scale(.75) translateX(-84%) translateY(-100%) rotate(2deg);
	
	}

#slide3 img:last-of-type {
	
transform: translateZ(.4px) scale(.6) translateX(-80%) translateY(-40%) rotate(-5deg)
	
}
	
#slide3::before {
	
background: url("image.jpg") no-repeat center/cover fixed;
transform: translateZ(-1px) scale(2)
	
}

#slide4 {
	
background:url("image.jpg") no-repeat center/cover fixed;

	
}





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.

haut page