Simple Parallax Scrolling

Parallax scrolling is an effect used to create the illusion of depth by having several layers moving at different speeds.
In this article, we'll see how to implement a simple Vertical Parallax Scrolling.

You are free to copy, modify and use this code as you wish.

Before we begin: a note on mobile support

This effect is quite heavy on mobile devices, and very few will reach a decent framerate, especially if you're using several layers with transparencies and/or CSS effects, so it is important that you provide a "flat" fallback for mobile users.
This is not a limitation of the solution proposed here: many big libraries exist that implement parallax, but at the moment I'm writing this, they all suck on mobile devices.

Code

We want to define some "Parallax areas", which are containers for several layers. Since the layers have to move inside their areas, the size of the areas cannot be automatically calculated and must be expressed with inline CSS.
Layers will have a depth property (I'll call this data-parallax), which can change in time.
Inside the areas, vertical offset will be applied to the layers using the top property.

Let's see the code to run for each frame to move the layers around:

Loading...

And the CSS that goes with it:

Loading...

This code detects all elements of class px_area, and moves the px_layer class elements inside them.
It must be run for each frame, using requestAnimationFrame, a timer or whatever way you prefer. I'll tie this to smooth scrolling.

Smooth scrolling: a necessity

Smooth scrolling is necessary for 2 reasons: first, it makes the Parallax effect much more visible, and second, it hides the lag when the browser is not running at a perfect 60 fps.
You can use a library for smooth scrolling, or see my article about it.

I'll be using my lightweight smooth scrolling. I'll apply it to the whole page and use it to run the parallax code perfectly synced with the scrolling:

smoothScroll(window,parallax);

How to use it

First, we need to load the parallax and the smooth scrolling. I'll assume you're using my smooth scroll implementation, but you can use another library if you prefer.

And initialize it:

smoothScroll(window,parallax);

I applied the smooth scroll to the entire window, but you can apply it to single elements if you need to.

Now we can define a px_area and put stuff into it

<div class="px_area" style="height:40em"/>
<div class="px_layer" data-parallax="-0.9"/>
...code for layer 1...
</div>
<div class="px_layer" data-parallax="-0.2"/>
...code for layer 2...
</div>
...
</div>

The data-parallax attribute indicates the depth of the element.
-1 means it's fixed to the background Values between -1 and 0 indicate the depth
0 means it scrolls with the page
Values between above 0 indicate how much it sticks out

Note that I have sorted the layers by increasing depth. That is because the z-index is not touched, allowing for background elements to be drawn in front of the foreground if you want to make your eyes bleed.

An example

Let's see an example with a few layers.
Notice the depth effect as you scroll this area.

CSS

div.rectangle{
width:90%;
margin-left:auto;
margin-right:auto;
margin-top:30vh;
height:10vh;
box-shadow:0 0 4vh rgba(0,0,0,0.3);
}

HTML

Old browser