Parallax scrolling, which creates a sense of depth on your site, is powerful because it is so engaging. When looking through websites making use of this design effect, it's hard not to be inspired to implement it on your own website.

By using Cascading Style Sheets (CSS) — the coding language used to enhance the appearance of your website — you can create engaging, scrolling features that can help to tell the story of your brand.

Download Now: Free Intro Guide to HTML & CSS

Though there are several different approaches to achieving a parallax scrolling effect, making the background move slower than the foreground is the most popular.

A slower moving background embodies the same type of feeling as when you are inside a moving vehicle looking out: the sky and clouds in the background appear to move at a slower pace than the trees and houses in the foreground.

Excellent Parallax Scrolling Examples

Websites with parallax scrolling are incredibly engaging, imaginative, and often tell a story. Here are some of our favorite examples via Awwwards:

1. Defeat B.O.C.O.

The Defeat B.O.C.O. creative team takes you on a journey with a horizontal parallax scrolling design that also incorporates a vertical slide that takes you below the surface.

Clever parallax scrolling effect on the Defeat B.O.C.O website

2. Stock Dutch Design 

Stock Dutch Design, a design studio, uses clever parallax elements to bring attention to its website’s typography. Each letter has a photo that moves subtly when you scroll. 

Parallax scrolling on Stock Dutch Design's website

3. Delassus Group 

Delassus Group, a grower of produce, uses a parallax scrolling effect to highlight one of its offerings: tomatoes. 

Delassus Group's parallax scrolling design on its product page for tomatoes

4. Beer Camp

A powerful zooming effect can also be created with parallax scrolling.

This is exactly what Beer Camp decided to do to help users focus on their most important website elements.

Beer Camp uses parallax scrolling to create a zoom effect as you scroll

5. PORSCHEvolution

With a long, rich history in the automobile industry, PORSCHEvolution's website design team used parallax scrolling to show off a variety of models that have rolled out of the manufacturer's facilities.

PORSCHEvolution's page features parallax scrolling to showcase the history of its car

6. ToyFight

Award-winning creative agency ToyFight's website is subtly interactive thanks to parallax scrolling features. The resulting 3D effect is powerful and certainly increases engagement.

ToyFigh's website uses parallax scrolling to engage users

7. Work.Studio

Work.Studio uses a highly subtle parallax effect to take us from the heading to the body of its home page. It’s so subtle that it’s easy to miss in the gif. The letters don’t scroll with the page, instead staying in their position as you scroll upward. 

A subtle parallax scrolling effect is used in the Work.Studio website

8. Spoke

Spoke's creative use of parallax scrolling makes the list for a variety of reasons.

Perhaps the most interesting — and fun — choice their creative team made was to switch perspectives. The design goes from a straight on perspective to a bird's-eye view during the scrolling process.

Spoke's website uses a parallax effect to walk users through clever animations

9. Garden Estudio

Garden Estudio's website is notable not because of its "wow" factor, but because it demonstrates how a simple, straightforward parallax scrolling feature can enhance a website's design.

Garden Estudio's site uses parallax scrolling for its header image

10. Dave Gamache

Dave Gamache's mix of animation with the subtle use of parallax scrolling creates an entrancing effect against a gray-scale background.

Dave Gamache's website uses a clever parallax effect to engage website visitors

How to Create Parallax Scrolling in CSS & HTML

Are you inspired to take your website to the next level with parallax scrolling?

Though it may seem overwhelming to implement the code required to get it right, using CSS to create this animation keeps things simple.

There are several ways you can incorporate parallax scrolling into your website with CSS. The most straightforward approach involves using a container element to set a particular height for a background image.

Method 1: Create a Container Element and Set the Image Height

You'll use this property to create the parallax scrolling effect: background-attachment: fixed.

You can use other background properties for additional styling purposes, such as centering and scaling the image.

Here's a basic CSS code snippet for creating a parallax effect:

 

.example { background-image: url("image.png");

* Set the height */ height: 400px;

/* Create a parallax effect */

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover; }

Setting a Max Height

Alternatively, instead of setting a specific height in terms of pixels, you can also set height to 100% (which then corresponds to image's height).

Within your HTML code, the container element used is:

 <div class="example"></div>

You can test out the code and play with CSS parallax scrolling on Codepen.

Creating Mobile Responsiveness

Once you start playing around with this code, you'll quickly realize that background-attachment: fixed will often cause problems with mobile versions of your website.

There is an easy fix for that by adding a media query. 

 

@media only screen and (max-device-width: 1366px) {

  .example {

background-attachment: scroll;

  }

}

Method 2: Create a Page Wrapper and Static Section

There's an alternative way of creating the parallax scrolling effect: with a page wrapper and a static section.

 

<main class="wrapper">

  <section class="img1">

    <h1>Parallax</h1>

  </section>

  <section class="static">

    <h1>Content</h1>

  </section>

  <section class="img2">

    <h1>Content 2</h1>

  </section>

</main>

The wrapper contains the perspective and scroll properties for the whole page, while the static section is the background to demonstrate the parallax.

Parallax adds the ::after pseudo-element to the background image, as well as the transform element needed for the parallax effect.

In this code, section is referring to the size, display, and text properties which are not usually relevant to the parallax. Additionally, it's worth noting that img identifies the background image for each section.

The CSS code required to achieve this effect is a bit more lengthy.

Here's what you need to include and why:

 

.wrapper {

  height: 100vh;

Scaling the images adds a horizontal scrollbar and you'll have to disable overflow-x to get rid of it.

 

 overflow-x: hidden;

  /* Enable scrolling on the page. */

  overflow-y: auto;

The following 2px refers to the simulated distance between the transformed objects and the viewpoint.

 

  perspective: 2px;

}

.section {

Setting position: relative; creates absolute positioning between child and parent elements.

 

position: relative;

You must set a specific height for the container but the value is irrelevant.

 

  height: 100vh;

  /* For text formatting. */

  display: flex;

  align-items: center;

  justify-content: center;

  color: blue;

  text-shadow: 0 0 5px #666;

}

.parallax::after {

Here's where you set the position and display details for the pseudo-element.

 

  content: " ";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

Next, you have to move the pseudo-element away from the viewport, then scale it up again to fill the viewport back up.

 

transform: translateZ(-1px) scale(1.5);

Background-size forces the image to fill the entire element.

 

  background-size: 100%;

Z-index makes it so sibling elements don't overlap.

 

   z-index: -1;

}

.static {

  background: lightblue;

}

Finally, you set the background images.

 

.img1::after {

  background-image: url('image1.jpg');

}

.img2::after {

  background-image: url('image2.jpg');

}

Now that you know how to create a parallax scrolling effect in HTML and CSS, let’s go over how you can do it specifically on a WordPress website. 

How to Do Parallax Scrolling in WordPress 

You can create a parallax scrolling effect in WP in multiple ways. You can either code your new parallax section into your website code, install a free parallax scrolling theme, or install a dedicated plugin.  

One of the best things about WordPress is that it’s highly customizable and flexible. Each of these options will get you a similar, if not identical, result. 

If you want to have utmost flexibility, though, we recommend going with the HTML and CSS coding route. You can finetune your code without needing to switch to another theme or install a plugin that may slow down your site. 

1. Add Parallax Scrolling Using CSS and HTML 

If you want to add a parallax scrolling effect to all of your pages, there’s a simple, hassle-free way to do it through CSS and HTML. 

This might seem complicated, but luckily, you’ve already got the code to get this done. Before using this method, be sure that you’re comfortable editing theme files in WordPress. 

First, navigate to your theme editor by clicking Appearance > Theme Editor in your admin sidebar. You’ll arrive at a page like this: 

Theme editor in WordPress

Image Source

Under Theme Files, find the file for the section where you’d like to add a parallax background image. Do you want to add it right below the header? In the center of a page? Or maybe at the bottom of the page? 

All themes have files for the header and footer sections, as well as for each page template. Luckily, most theme makers name these files in an accessible way. 

If you’re looking for the header section, the file will likely be called “header.php” or “Header.” If you’re looking for a certain page template, it will likely be called “Single Page” or “Page Template.” 

Once you’ve found the correct file, copy and paste the following code: 

 <div class="parallax"></div>

Next, upload your parallax background image to your WP media library. Save the image’s URL for the next step. 

Last, copy the parallax CSS into your website code. Go to Appearance > Customize > Additional CSS. Paste the following code: 

 .parallax {

  background-image: url("image.png");

  height: 400px;

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

Be sure to replace the “image.png” file with your background image’s URL. 

2. Install a Parallax Scrolling Theme 

Not into coding? Installing a parallax scrolling theme is one of the easiest and simplest ways to add a parallax scrolling effect to your WP website. 

These themes come with built-in parallax functionality, which makes it easy to add and remove the effect from your website. 

3. Install a Background Parallax Plugin

If you don’t want to install a new theme entirely, you can install a plugin such as Advanced WordPress Backgrounds and Parallax Image

These two plugins add a parallax effect to your site after you add a simple shortcode to the content. They’re compatible with major WP page builders such as WPBakery and Elementor. 

How to Add Parallax Scrolling to a Single WordPress Page 

You might want to add parallax scrolling to a single page. If that’s the case, we’ve got you covered. In the case of a plugin, you can add a shortcode to the individual page’s content. 

In the case of a parallax theme, you’ll be able to toggle parallax options on a page-by-page basis. 

If you want to use HTML & CSS, the steps are nearly identical to item #1 above, only you won’t edit your theme files.  

First, navigate to the page you want to edit by clicking Pages > All Pages on your admin sidebar.  

Next, switch from the visual editor to the code editor. On Gutenberg, you find this option by clicking the three dots on the top right corner, navigating down to Editor, and clicking Code Editor

WordPress visual editor in Gutenberg

Image Source

Other page builders will look a little differently, but they’ll always offer the option of switching to a code editor. 

After you switch to the code editor, your page will look like a variation of this: 

WordPress code editor in Gutenberg

Image Source

Choose where you want to add a parallax section and add the following code.  

 <div class="parallax"></div>

After that, upload your background image to your media library and add the CSS to your website using the same steps listed above.

How to Get The Best Out of Parallax Scrolling

Now that you have an idea of how to write a parallax scrolling script with CSS, you can start experimenting with all the design possibilities on your website. Ideally, you'll experiment on a staging site before pushing this code to your live website.

When thinking about how to design your website to take full advantage of parallax scrolling, don't forget to tell a story, make it engaging, and include a call-to-action.

Also, don't just use it for the sake of using it! Parallax scrolling is an awesome tool to boost engagement, but it must be used tactfully for optimal impact.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Feb 16, 2021 7:00:00 AM, updated February 16 2021

Topics:

User Experience