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>

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

See you soon!

Enzo.

Comments

[Andrew Baisden]

The Parallax Effect is so underrated such a great technique!

[Ustariz Enzo]

Agreed mate!