Building a Parallax Scrolling Effect with CSS

Written by Massa Medi

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:

Step 1: Create Your Project Folder

Think of this folder like a container where we'll keep all our project files - just like having a special drawer for your art supplies!

  • On Windows:
    1. Right-click on your desktop
    2. Choose "New" > "Folder"
    3. Name it "parallax-scrolling-effect"
  • On Mac:
    1. Right-click on your desktop
    2. Choose "New Folder"
    3. Name it "parallax-scrolling-effect"

Step 2: Get Your Text Editor Ready

A text editor is like your crafting tool - it's where we'll write our code. We recommend Visual Studio Code because it's free and beginner-friendly!

  1. Download Visual Studio Code from code.visualstudio.com if you haven't already
  2. Install it on your computer
  3. Open VS Code and drag your "parallax-scrolling-effect" folder into the window

Step 3: Create Your Project Files

We need two special files - think of them as two pieces of paper where we'll write different things:

  • index.html - This is like the blueprint of our parallax effect (the structure)
  • styles.css - This is like our painting palette (where we make things pretty)

To create these files:

  1. Click "New File" in VS Code
  2. Save it as "index.html"
  3. Create another new file
  4. Save it as "styles.css"

🎯 Success Check: At this point, you should have:

  • A folder named "parallax-scrolling-effect" on your desktop
  • Visual Studio Code open with your folder
  • Two empty files: index.html and styles.css

👉 Need Help? If something's not working, try closing VS Code and opening it again, or create the files using the "File → New File" menu.

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

CSS-Only Projects

Build a Simple Personal Portfolio Layout

January 15, 2025

Learn how to style a personal portfolio using basic CSS properties like background colors, fonts, and spacing. Focus on layout fundamentals such as margins, padding, and text alignment.

Start Tutorial

Style a Blog Post with CSS

January 5, 2025

Style a simple blog post using CSS. Learn how to apply font families, text colors, and adjust line height and spacing to enhance readability.

Start Tutorial

Create a Responsive Navigation Menu

January 17, 2025

Build a responsive navigation menu that works across devices using media queries. This project focuses on layout design and adapting styles for smaller screens.

Start Tutorial

Design an Advanced Pricing Table

January 16, 2025

Create a fully responsive pricing table with CSS grid. Learn to use grid properties to structure rows and columns, adding hover effects for interaction.

Start Tutorial

Create a CSS Animation for Button Hover Effects

January 15, 2025

Explore the power of CSS animations by designing interactive button hover effects. This project focuses on keyframes, transitions, and animation timing functions.

Start Tutorial