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.

Free Intro Guide to HTML & CSS [Download Now]

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.

10 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.

Defeat B.O.C.O. parallax scrolling website.

2. Femme Fatale

Next up is Femme Fatale. There is a lot going on with this French creative studio's site — and nothing seems to be moving at exactly the same speed.

Here, you can see how images, backgrounds, and even individual letters can be set to different parallax scrolls.

Femme Fatale parallax scrolls.

3. Pixages

Pixages uses a smooth parallax scrolling look.

It uses powerful collage art with simple text to slowly reveal the site's purpose to users while keeping them fully engaged.

Pixages parallax scroll with collage art.

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 parallax scroll gives us a powerful zooming effect.

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 design team uses parallax scrolling.

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.

ToyFight's interactive, parallax scrolling website.

7. Freakshow Wine

If the fire breathing woman at the front and center of this website design isn't enough to encourage users to engage, Freakshow Wine's use of parallax scrolling will. In this case, it's actually the mouse pointer that triggers the effect — not scrolling.

Freakshow Wine uses parallax scrolling.

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 uses parallax scrolling on its website.

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 parallax scrolling website.

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 uses parallax scrolling and animation.

How to Create Parallax Scrolling in CSS

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 keeps things simple.

There are several ways you can write 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.

W3schools shares a basic CSS code snippet for creating a parallax effect:

 

 

  .parallax {

  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="parallax"></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 some extra code from W3schools:

 

 

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */

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

  .parallax {

background-attachment: scroll;

  }

}

Method 2: Create a Page Wrapper and Static Section

Alligator.io provides an alternative way of creating the parallax scrolling effect.

 

 

<main class="wrapper">

  <section class="section parallax img1">

    <h1>Parallax BG1</h1>

  </section>

  <section class="section static">

    <h1>YES</h1>

  </section>

  <section class="section parallax img2">

    <h1>GRUMPY</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');

}

How to Get The Best Out of Parallax Scrolling

Now that you have an idea of how to write 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.

New Call-to-action

 css introduction

Originally published Feb 19, 2020 12:19:14 PM, updated February 19 2020

Topics:

CSS Animation