DEV Community

Cover image for Parallex Effect in CSS!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Parallex Effect in CSS!

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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/TheWebSchool

See you soon!

Enzo.

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

The Parallax Effect is so underrated such a great technique!

Collapse
 
ziratsu profile image
Ustariz Enzo

Agreed mate!