home

The Parallax Effect

Scope

The scope of this tutorial includes a couple of methods for creating a parallax effect using pure CSS or a combination of CSS and jQuery. I will also explain the key concepts of my parallax framework.

Basic Concepts

Parallax scrolling is a technique in computer graphics and web design, where background images move by the viewport slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.

This parallax demo is amazing and will help you understand the effect. Make sure to check the Debug option in the top left part of the page.

background-attachment: This property sets whether a background image is fixed or scrolls with the rest of the page.

overflow: Content that is too big to fit in a specified area.

z-index: Specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

$(window).scroll(): This function is an event handler. The code inside of it is activated every time the user scrolls.

$(window).scrollTop(): This function returns the distance (measured in pixels) between the browser window and the top of the page.

background-position-y: This property sets the vertical position of a background image.

Simple CSS Parallax Effect

Code Example

See the Pen Simple CSS Parallax Effect by Andrew Procacci (@acprocacci) on CodePen.

Explanation

It's as simple as a few lines of code! Create a <div>, give it a background, and set its background-attachment property to fixed. Any other content that you add before or after the <div> should slide over the background image.

The key to this simple CSS effect is the background-attachment property. This property sets whether a background image is fixed or scrolls with the rest of the page. When set to fixed, the background-attachment property fixes the assigned background image to the page. This will turn the element containing the fixed background into a "window", allowing users to see through the element to where the image is now fixed. The beauty of this property is that it takes care of any overflow/z-index issues that may arise when trying to recreate this effect another way.

CSS + jQuery Parallax Effect

Code Example

See the Pen CSS + jQuery Parallax Effect by Andrew Procacci (@acprocacci) on CodePen.

Explanation

For this example, I recycled some of the code used for the simple CSS parallax tutorial. To create a more convincing parallax effect, I used jQuery to animate the background image's background-position-y property in relation to the browser window's scrollTop.

The key components to this more convincing effect are $(window).scroll(), $(window).scrollTop(), and the equation used to set the background-position-y property.

$(window).scroll() is an event handler. The code inside of it is activated every time the user scrolls. $(window).scrollTop() is a function that returns the distance (measured in pixels) between the browser window and the top of the page. Starting with a value of 0 when the window is at the top of the page, this value increases as the user scrolls down and decreases as the user scrolls back up. Since the scroll top value can get very large, it needs to be reduced before we can use it to increase or decrease the background image's background-position-y value. If we don't do this, the background image will fly off the page when the user scrolls. The equation I used for this example was (scrollTop/75). Once the new value is found, the background-position-y property can be given a new value, effectively moving the background image up or down as the user scrolls.

Procaccillax.js Framework

Code Example

This whole page is the code example! Open up the source code or inspect the elements.

You can also download the framework here.

Explanation

My parallax framework allows users to add full-screen parallax backgrounds to any <div>. It accepts a <div> id, background image url, and parallax rate as parameters. The framework appends a new <div> to the one whose id is being passed as a parameter, calculates where to place the image on the page, and animates the image as the user scrolls.

Instructions

See the Pen Procaccillax.js Example by Andrew Procacci (@acprocacci) on CodePen.