Parallax Scrolling Effect with Pure CSS featured image

Creating a Parallax Scrolling Effect with Pure CSS

Modern CSS has redefined web development with its powerful functionalities and extraordinary capabilities. CSS is a one-size-fits-all tool that offers standout options to make web pages highly interactive and enticing. Be it the flexibility in design, rapid customization, excellent styling options, or the advanced User Interface (UI) — CSS brings end-to-end solutions for all web development and styling needs. Above all, using CSS and HTML, you can add animation and effects by writing just a few lines of code, which is otherwise strenuous using JavaScript.

In this guide, we’ll walk you through the steps of creating a parallax scrolling effect with CSS in Chrome.

Prerequisites

To follow along with this tutorial, you must have a basic understanding of HTML and CSS.

Step 1: Create a New Project

Let’s start with creating a new project folder and files using the command-line interface. Open your terminal and type the following command to create a new project folder:

Use the cd command to change the directory to the css-parallax folder:

Next, create an HTML file in the css-parallax folder where we’ll put all the HTML codes. Name the file index.html and open it  using the nano command:

Once we have our index.html file ready, let’s move forward and structure the webpage by adding the introductory HTML codes.

Step 2: Structure of the Basic HTML

In this step, we’ll design our web page by adding the HTML codes. Add the following lines of code in the index.html file:

After setting up the basic structure of our web pages, create three section classes – two for the background images and one for the static plain background. Next, add the following lines of code in the <body> tag:

Inserting the HTML codes in the <body> tag completes the basic setup of our html.file. In the upcoming steps, we’ll introduce CSS and define styling options for each.

Step 3: Introduction to CSS

Let’s style the website by adding the CSS file and creating the parallax effect. First, create a CSS file in the css-parallax folder where we’ll put all the CSS codes required to create the parallax scrolling effect. After that, insert a styles.css file in your css-parallax folder using the nano command:

We’ll style our webpage starting with the .wrapper class. The .wrapper class sets the perspective and scroll properties for the whole page. Start with the wrapper class and specify its height, overflow, and perspective. Set the height of the wrapper to a constant value for the parallax scrolling effect to work. In this guide, we have set the viewport value as using 100vh to get the full height of the screen’s viewport. You can modify the vh value based on your project needs. Next, disable the screen horizontal scrollbar by setting the overflow-x property as hidden. Also, specify the perspective property value as 3px. Let’s add the following lines of code in the styles.css file class:

Step 4: Add Style for the .section Class

Next to the wrapper class, add styles to the .section class. The .section class defines the size, display, and text properties for the main sections. Set the position as relative to align a relative positioning of the child element .parallax::after and the parent element .section. Keep the view-height(vh) as 100 to get the full height of the screen’s viewport. Add, modify, and style the other parameters as per your needs.

Inside your styles.css file add the following code next to the wrapper class:

Next, we’ll add a pseudo-element and style it to create the parallax effect and put it in action.

Step 5: Add Styles for the .parallax Class

In this step, we’ll add a pseudo-element on the .parallax. This pseudo-element will be the last child of the element and will add an ::after pseudo-element to the background image responsible for initiating the parallax effect. In the first half of the code, the basic display specification and positioning of the pseudo-element are set up. In the next half, we’ll add the transform property using the translateZ() CSS function and keep it as (-1px).  Additionally, add a z-index to control the vertical stacking.

Add the following code below the .section class:

Step 6: Add Images and Background for Each Section

Let’s add the final CSS properties in the background images and background color of the static section. Start with adding a solid background color to the .static section. Set the background color as aqua and add the following code after the .parallax::after class:

The .static class adds a background to the static section that does not have an image. The other two sections with the .parallax class have unique classes intended for holding background images. Add the URLs of the background images in .bg1 and .bg2 classes respectively.

In this tutorial, we’re using random images from Unsplash. You can also use images from other websites like Pixapay, Placekitten, and Pexels, to name a few, and customize them as you like. Add the following code to the .static class:

Step 7: Connect CSS with HTML

Now that we’ve added all the code for the parallax scrolling effect, let’s link the styles.css file with the index.html:

Open index.html we have created in Step 2 and in the Chrome browser:

P_Demo

Note: In this article, we’ve experimented with and tested the CSS properties to work on the Chrome browser. However, the parallax scrolling effect may crash or not work in other browsers like Safari, Bing, and Firefox because of the uniqueness of their browser customizations. In case you’re not using the Chrome browser, check the respective configurations to see the effect in action.

Conclusion

In this tutorial, we went through the steps of setting up a functioning webpage using a basic setup. There are plenty of other interesting options and customization options you can experiment with. You can try adding shadow effects, modifying image scrolling, and other adjustments to make your learning fun and exciting.

To further dive into web development topics, check these resources from our blog:

Happy Computing!