This content originally appeared on DEV Community and was authored by Ustariz Enzo
Hey fellow creators,
Learn how to do a parallex effect in CSS in less than a minute!
If you prefer to watch the video version, it's right here :
1. The HTML structure.
Create three sections that contain a title each:
<section class="s1">
<h2>SECTION 1</h2>
</section>
<section class="s2">
<h2>SECTION 2</h2>
</section>
<section class="s3">
<h2>SECTION 3</h2>
</section>
2. Style each section.
Make sure each section takes up the full height of the viewport and that the background covers the whole space and is centered:
section {
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
3. Style the titles.
Style the titles however you want, here's how I did it:
section h2 {
text-align: center;
background: #F1F1F1;
padding: 20px;
font-size: 55px;
font-weight: 200;
}
4. Add the background images.
Add your assets to a folder and then add them as backgrounds to each section:
.s1{
background-image: url(imgs/img1.jpg);
}
.s2{
background-image: url(imgs/img2.jpg);
}
.s3{
background-image: url(imgs/img3.jpg);
}
5. Add the parallex effect.
In the section styling, add a background-attachment: fixed so that each image are fixed to the background of the different sections.
section {
background-attachment: fixed;
}
Now if you scroll down your app, you'll see that each image wipes out the one above or below it!
You can now create a simple parallex effect in pure CSS in under a minute ;)
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
This content originally appeared on DEV Community and was authored by Ustariz Enzo
Ustariz Enzo | Sciencx (2021-11-30T11:42:51+00:00) Parallex Effect in CSS!. Retrieved from https://www.scien.cx/2021/11/30/parallex-effect-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.