A piece of code that creates a visual effect where background elements move at a different speed than foreground content as the user scrolls down the page.
This simulates a 3D depth effect, making the webpage feel more immersive and engaging.
HTML Code
<div class="slide slide1">
<h2>Car Collection 2022</h2>
</div>
<div class="slide slide2">
<h2>Car Collection 2023</h2>
</div>
<div class="slide slide3">
<h2>Car Collection 2024</h2>
</div>
CSS Code
body {
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
.slide {
display: table;
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
}
.slide1{
background-image: url('https://cdn.pixabay.com/photo/2021/09/25/10/08/road-6654573_1280.jpg');
}
.slide2{
background-image: url('https://cdn.pixabay.com/photo/2016/05/05/17/59/sports-car-1374425_1280.jpg');
}
.slide3{
background-image: url('https://cdn.pixabay.com/photo/2016/11/22/23/44/porsche-1851246_1280.jpg');
}
.slide h2{
margin: 0;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 4vw;
color: white;
}
