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;
}