Building a Parallax Scrolling Effect with CSS

Written by Massa Medi| January 3, 2025

In this project, we'll create a visually engaging parallax scrolling effect using CSS. A parallax scrolling effect is a technique where the background moves slower than the foreground, creating a sense of depth and immersion.

Here's what we'll cover in this tutorial:

• Setting up the HTML structure for the parallax effect.
• Applying basic styling to the sections.
• Using CSS to create the parallax effect.
• Adding smooth scrolling for a better user experience.
• Making the parallax effect responsive for different screen sizes.

By the end of this project, you'll have a fully functional and visually engaging parallax scrolling effect. Let's get started by setting up our project files!

Setting Up Your Workspace

Creating Your Project Folder and Files

Before we start coding, let's set up a workspace for our project:

Setting Up the HTML Structure

Creating the Parallax Scrolling Effect HTML

Before we dive into CSS, let's set up the HTML structure for our parallax scrolling effect:

1. 1. Open "index.html": Open your "index.html" file in your code editor.
2. 2. Add the Parallax Scrolling Effect HTML: Copy and paste the following code into your "index.html" file:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Parallax Scrolling Effect</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <section class="parallax-section" id="section1">
       <div class="content">
         <h1>Section 1</h1>
         <p>This is the first section with a parallax background.</p>
       </div>
     </section>
     <section class="parallax-section" id="section2">
       <div class="content">
         <h1>Section 2</h1>
         <p>This is the second section with a parallax background.</p>
       </div>
     </section>
     <section class="parallax-section" id="section3">
       <div class="content">
         <h1>Section 3</h1>
         <p>This is the third section with a parallax background.</p>
       </div>
     </section>
   </body>
   </html>

Let's understand the HTML structure:

• <section class="parallax-section" id="section1">: Represents a section with a parallax background.
• <div class="content">: Contains the content for each section, including a title and a paragraph.

Save your "index.html" file. Now we have the basic HTML structure in place. In the next step, we'll start applying CSS styles to our parallax sections.

Styling the Body

Styling the Body

Let's start by styling the body of our HTML document to ensure a consistent and clean layout.

1. 1. Open "styles.css": Open the "styles.css" file in your code editor.
2. 2. Add Body Styles: Copy and paste the following CSS code into your "styles.css" file:

   body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     background-color: #f4f4f4;
     overflow-x: hidden;
   }

Let's understand the CSS rules we just added:

• font-family: Arial, sans-serif;: Sets the default font for the entire page.
• margin: 0;: Removes the default margin from the body.
• padding: 0;: Removes the default padding from the body.
• box-sizing: border-box;: Ensures that the padding and border are included in the element's total width and height.
• background-color: #f4f4f4;: Sets the background color of the body to a light gray.
• overflow-x: hidden;: Hides any horizontal overflow to prevent horizontal scrollbars.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the basic layout applied to your page.

In the next step, we'll style the parallax sections.

Styling the Parallax Sections

Styling the Parallax Sections

Now, let's style the parallax sections to give them a clean and modern look.

1. 1. Open "styles.css": Open the "styles.css" file in your code editor.
2. 2. Add Parallax Section Styles: Copy and paste the following CSS code into your "styles.css" file:

   .parallax-section {
     position: relative;
     height: 100vh;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
   }
   
   .parallax-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     z-index: -1;
   }
   
   #section1::before {
     background-image: url('https://via.placeholder.com/1920x1080');
   }
   
   #section2::before {
     background-image: url('https://via.placeholder.com/1920x1080');
   }
   
   #section3::before {
     background-image: url('https://via.placeholder.com/1920x1080');
   }
   
   .content {
     text-align: center;
     z-index: 1;
   }
   
   .content h1 {
     font-size: 3rem;
     margin: 0;
   }
   
   .content p {
     font-size: 1.5rem;
     margin: 10px 0;
   }

Let's understand the CSS rules we just added:

• .parallax-section: Styles the parallax sections with a relative position, full viewport height, and centered content.
• .parallax-section::before: Creates a pseudo-element for the background image with a fixed attachment to create the parallax effect.
• #section1::before, #section2::before,#section3::before: Sets the background image for each section.
• `.content`: Styles the content of each section with centered text and a higher z-index to ensure it appears above the background.
• .content h1: Styles the title of each section with a larger font size and no margin.
• .content p: Styles the paragraph of each section with a comfortable font size and margin.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the styled parallax sections.

In the next step, we'll add smooth scrolling for a better user experience.

Adding Smooth Scrolling

Adding Smooth Scrolling

Let's add smooth scrolling to enhance the user experience of the parallax effect.

1. 1. Open "styles.css": Open the "styles.css" file in your code editor.
2. 2. Add Smooth Scrolling: Copy and paste the following CSS code into your "styles.css" file:

   html {
     scroll-behavior: smooth;
   }

Let's understand the CSS rule we just added:

• scroll-behavior: smooth;: Adds smooth scrolling to the entire document, making the scroll experience more fluid.

Save your "styles.css" file. Now, if you open "index.html" in a web browser and scroll, you'll notice the smooth scrolling effect.

In the next step, we'll make the parallax effect responsive for different screen sizes.

Making the Parallax Effect Responsive

Making the Parallax Effect Responsive

Let's ensure our parallax effect looks great on various devices by adding responsive design using CSS media queries.

1. 1. Open "styles.css": Open the "styles.css" file in your code editor.
2. 2. Add Responsive Design Styles: Copy and paste the following CSS code into your "styles.css" file:

   @media (max-width: 768px) {
     .parallax-section {
       height: auto;
       padding: 50px 20px;
     }
   
     .content h1 {
       font-size: 2rem;
     }
   
     .content p {
       font-size: 1rem;
     }
   }

Let's understand the CSS rules we just added:

• @media (max-width: 768px): A media query for screens up to 768px wide (e.g., tablets and mobile phones).
• .parallax-section: Adjusts the height of the sections to auto and adds padding for better visibility on smaller screens.
• .content h1: Adjusts the font size of the title for better readability on smaller screens.
• .content p: Adjusts the font size of the paragraph for better readability on smaller screens.

Save your "styles.css" file. Now, if you resize your browser window or view the parallax effect on different devices, you'll see the layout adapt to different screen sizes.

In the next step, we'll add final touches to the parallax effect.

Adding Final Touches

Adding Final Touches

Let's add the final touches to our parallax scrolling effect to ensure it is fully functional and visually appealing.

1. 1. Open "styles.css": Open the "styles.css" file in your code editor.
2. 2. Add Final Touches: Copy and paste the following CSS code into your "styles.css" file:

   .parallax-section:hover::before {
     transform: scale(1.1);
     transition: transform 0.5s ease;
   }

Let's understand the CSS rules we just added:

• .parallax-section:hover::before: Scales the background image slightly larger on hover to create a subtle zoom effect.
• transition: transform 0.5s ease;: Adds a smooth transition effect for the zoom effect.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the final touches in action.

Congratulations! You've completed the CSS project, "Build a Parallax Scrolling Effect." You've learned how to create a visually engaging parallax scrolling effect using HTML and CSS.

Feel free to continue customizing your parallax effect and exploring more CSS techniques. Happy coding! 🚀

Recommended