Parallax Scrolling Effect
Tags: parallax, css, html, uidesign
Published: 2020-07-26 17:45:38

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**

```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>

``` 

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

**CSS**
```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;
    }
}
```

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**
```css
.img1, .img2, .img3, .img4 {
    position: relative;

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

    background-attachment: scroll;
}
```

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**
```css
@media (min-width: 420px) {
    .img1, .img2, .img3, .img4 { 
        background-attachment: fixed;
    }
}
```

**The full code**
{% codepen https://codepen.io/sekti92/pen/GRoLyYN %}

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