Creating the parallax effect

Although UIs are two dimensional, there are techniques that can be used to give the illusion of depth. One of the most prominent is parallax scrolling.

When you're driving down the street, objects that are close such as people, trees and other cars, appear to move faster than objects further away. This is the idea behind parallax scrolling. It is a technique used to give the illusion of depth by having the foreground scroll at a faster speed than the background. While it's only become common in web development over the last few years, the technique has been used for decades in the video game industry.

Here is an example of the effect.

The way it works is by having multiple layers on a page, and moving them independently.

CSS allows you to create different layers of your page using the Z-index property.

As you do not want the background to scroll as fast as the user is scrolling, you need a way to fix it in place, and control the scroll speed using another method.

CSS is often used for this purpose:

#background {
   position:fixed
}

There are many ways to do parallax scrolling, and although it can be done without Javascript, CSS's declarative nature makes it more difficult to understand, so we'll proceed with a Javascript/jQuery implementation.

In a typical Javascript or jQuery implementation, the following procedure is used:

1) Listen for a scroll event to know when to the page might need to be updated.

2) When a scroll event is detected, get the current position on the page.

3) Calculate the desired position of the background element. 

4) Move the background element to that location.

For step 1, this can be done simply by adding an event listener for the scroll event with vanilla Javascript. Here's an example:

window.addEventListener("scroll", calcParallax);

A jQuery implementation might look like this:

$(window).bind('scroll', function(e) {
   calcParallax();
});

As mentioned above, there are a number of different implementations and event listener is not always required.

The next step is to get the current position in the page. This is simple to do using Javascript:

position = window.scrollY;

pageYOffset  can be used instead of scrollY. It has slightly better support in old browsers.

In jQuery it can be done like this:

position = $(window).scrollTop();

 

The next steps are to calculate the position of the background, and to move it. There are many ways to position elements using Javascript and CSS. One simple way is to use the top property to set the element's top distance. The next step is create the calculation to be used to offset the background. In this case, we'll have the background move at half the speed of the foreground. For this reason we'll divide the scroll distance by 2 though you may find it easier to multiply by a decimal value.

Note that the 'px' at the end is mandatory.

elementName.style.top = -(window.scrollY / 2)+'px'

 

Although that may seem quite complicated, it's only a few lines of Javascript:

function calcParallax() {
  const background = document.getElementById('#background');
  background.style.top = -(window.pageYOffset / 2)+'px';
}

window.addEventListener("scroll", calcParallax);

 

A jQuery version is also only a few lines long.

$(document).ready(function() {
   $(window).bind('scroll', function(e) {
      calcParallax();
   });
});

function calcParallax() {
   var scrollPosition = $(window).scrollTop();
   $('#background').css('top', (0 - scrollPosition * 0.2) + 'px')
}

 

Next step is to call the function. The function will be invoked whenever the page is scrolled.

While it is often implemented in Javascript or JQuery, it can also be implemented in CSS. The key is to use the background-attachment property:

background-attachment: fixed;