How to Create a Parallax Scrolling Effect Using CSS

To create a parallax scrolling effect using CSS, you can follow these steps:

1.            Set up the HTML structure

Create the HTML structure with sections that will have the parallax effect.

Html

<div class="parallax-container">
      <div class="parallax-section"></div>
      <div class="parallax-section"></div>
      <div class="parallax-section"></div>
 </div>

In this example, the parallax sections are represented by <div> elements with the class “parallax-section”. They are wrapped within a container <div> with the class “parallax-container”.

2.            Add CSS styles for the parallax effect

Apply CSS styles to create the parallax effect.

Css

.parallax-container {
      height: 300px;
      width: 80%;
      overflow-x: hidden;
      overflow-y: auto;
      margin: 20% auto;
    }
    .parallax-section {
      height: 100%;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }

The CSS code above adds styles to the parent container which has a class of .parallax-container, this sets the height of the container that holds the parallax sections. Adjust the height to your desired value. The overflow-x: hidden; property ensures that horizontal scrolling is disabled, and overflow-y: auto; enables vertical scrolling when the content exceeds the container’s height.

The .parallax-section class sets the height of each parallax section to 100% of the container’s height. The background-size: cover; property ensures that the background image covers the entire section. While the background-position: center; centers the background image, the background-attachment: fixed; ensures the background image remains fixed as the content scrolls.

3.            Modify the CSS styles

Add background images or further customize the CSS styles of the parallax sections to achieve the desired effect.

Css

 .parallax-section:nth-child(1) {
      background-image: url('./images/images\ \(5\).jpeg');
    }
    .parallax-section:nth-child(2) {
      background-image: url('./images/images\ \(6\).jpeg');
    }
    .parallax-section:nth-child(3) {
      background-image: url('./images/images\ \(7\).jpeg');
    }

Result

You can also learn how to create a modal using html and Css here

Code Explanation

In this example, the background images for each parallax section are set using the background-image property.

I placed the images in a folder called images and that is why I have to first navigate to the image folder in order to access the image. You may not need to do the same if your images are in the root folder of your document.

Replace the image path on my code to your own actual paths or URLs of your desired images.

By following these steps, you can create a basic parallax scrolling effect using CSS.

Adjust the CSS styles and add more parallax sections as needed to achieve the desired visual effect.