DEV Community

Sekti Wicaksono
Sekti Wicaksono

Posted on

2 1

Parallax Scrolling Effect

Hello folks, hope you all in a good mood.

Recently I was looking at my old project and I think I want to share it here, because it seems some sites still using it.
So let get cracking.

HTML

<div class="img1">
    <h1>Parallax Background</h1>
</div>
<section>
    <h2>Section One</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste excepturi ad provident dolorum quos sint consectetur nobis soluta facilis, voluptatum est deleniti nam molestiae tempore possimus recusandae enim necessitatibus quae. Voluptate repellat perspiciatis repudiandae cumque!</p>
</section>

<div class="img2">
    <h1>Image Two</h1>
</div>

<section>
    <h2>Section Two</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste excepturi ad provident dolorum quos sint
            consectetur nobis soluta facilis, voluptatum est deleniti nam molestiae tempore possimus recusandae enim
            necessitatibus quae. Voluptate repellat perspiciatis repudiandae cumque!</p>
</section>

<div class="img3">
    <h1>Image Three</h1>
</div>

<section>
    <h2>Section Three</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste excepturi ad provident dolorum quos sint
            consectetur nobis soluta facilis, voluptatum est deleniti nam molestiae tempore possimus recusandae enim
            necessitatibus quae. Voluptate repellat perspiciatis repudiandae cumque!</p>
</section>

<div class="img4">
    <h1>Image Four</h1>
</div>

Enter fullscreen mode Exit fullscreen mode

On the code above, I create 4 div for 4 images background with section in between of div.
Nothing special.

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap');

* {
    padding: 0;
    margin: 0;
}

body, html {
    height: 100%;
    width: 100%;
    font-family: 'Monserrat', sans-serif;
    line-height: 1.8em;
    font-size: 1em;
}

.img1 {
    background-image: url(../images/image1.jpg);
    min-height: 100%;
}

.img2 {
    background-image: url(../images/image2.jpg);
    min-height: 400px;
}

.img3 {
    background-image: url(../images/image3.jpg);
    min-height: 400px;
}

.img4 {
    background-image: url(../images/image4.jpg);
    min-height: 400px;
}

/* Text */
h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: rgba(0,0,0,0.4);
    padding: 25px 80px;
    color: #fff;
    font-size: bold;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.25em;
}

section {
    padding: 4em;
    text-align: center;

    h2 {
        text-transform: uppercase;
        margin-bottom: 1em;
    }
}
Enter fullscreen mode Exit fullscreen mode

As you can see, .img1, .img2, .img3,and .img4 now has different image. I put all the images in directory images.
The key of parallax effect are 5 properties.
They are position,background-position, background-size, background-repeat, and background-attachment. Now, lets add them to 4 image classes

CSS

.img1, .img2, .img3, .img4 {
    position: relative;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    background-attachment: scroll;
}
Enter fullscreen mode Exit fullscreen mode

Well, background-attachment: scroll is the default value. In order to make the effect, lets set the background-attachment to fixed. But, I want this effect working at the min-width:420px. So at mobile view will be default.

So I have to put @media query on my CSS
CSS

@media (min-width: 420px) {
    .img1, .img2, .img3, .img4 { 
        background-attachment: fixed;
    }
}
Enter fullscreen mode Exit fullscreen mode

The full code

Credits:
All Images from: https://www.pexels.com/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs