Give us a call: (800) 252-6164

Parallax Scroll Tutorial: How to Create a Parallax Website

Looking to create a parallax website? Our parallax scrolling tutorial on this page uses javascript, without any additional libraries, like jQuery. Skip to the parallax tutorial| View the live, extremely simple, parallax scrolling demo.

If you are looking to use jQuery, Stellar.js, and Skrollr.js, or strictly CSS to create your parallax website, please consider one of the tutorials created by other publishers, listed on our parallax tutorials page.

 

What Is Parallax Website Design?

In parallax website design, different objects move at different speeds. Generally, objects that are farther away will move more slowly than objects that are closer to the viewer. Conversely, objects that are in front will move faster than the objects behind them.

It’s an Animation

Just like any animation, you change how something moves based on something else, like time. In this case however, you are animating parts of your website compared to the viewer’s location on the page.

The speed of the animation is controlled by how fast the visitor scrolls down the page. This means that the viewer gets to control how fast the animation goes. If the visitor scrolls really quickly, the animation will progress really quickly. If the visitor scrolls slowly, the animation will progress slowly.

This creates an animation where the visitor gets to decide how fast it goes. It’s a a bit like one of the flip books that when you quickly move through the pages, it looks like a moving image. Unlike a video, your visitor gets to decide how fast time progresses.

While parallax is usually used to make the background move more slowly than the rest of the page, it can also be used to make objects move more quickly. This will make them look like they are closer to the visitor.

 

A Simple Parallax Tutorial

We will be creating a very simple parallax website. This will move the background more slowly than the rest of the page as you scroll down.

Click here to view the live parallax demo.

Creating a Parallax Website from Scratch

We will be putting this javascript code together, piece by piece:

var topDiv = document.getElementById("topDiv");var speed = 1.5;window.onscroll = function(){var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";}

 

For the parallax to work, we need to adjust the top of the background element. In this case, it is contained in a div with an id topDiv, stored in a variable named topDiv. The background’s position will adjusted by changing the backgroundPosition of the element:

var topDiv = document.getElementById("topDiv");topDiv.style.backgroundPosition =

 

We will be setting it the x position to 0; we aren’t doing any horizontal parallax scrolling.

var topDiv = document.getElementById("topDiv");topDiv.style.backgroundPosition = "0px "

 

We will set the y-position of our “topDiv” div as a fraction of how far we have scrolled down the page. We can get this using window.pageYOffset. We will store it in a variable called yOffset.

var yOffset = window.pageYOffset;

 

We also need to know how slow we want our background to move. We will divide the yOffset by our speed. We will use a value of 1.5.

var speed = 1.5;

 

Before we continue, your code should now look like:

var topDiv = document.getElementById("topDiv");var speed = 1.5;var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0px "

 

We will now finish setting the y position of the background to yOffset / speed.

var topDiv = document.getElementById("topDiv");var speed = 1.5;var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0px " + (yOffset / speed) + "px";

 

Finally, we want this code to run every time the page is scrolled. We will therefore put it into a window.onscroll = function() function.

var topDiv = document.getElementById("topDiv");var speed = 1.5;window.onscroll = function(){var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";}

The HTML

Here is our basic HTML. We will be changing the background of the topDiv element.

<!DOCTYPE html><html><head></head><body><div id="topDiv"><div><h1>A Simple Parallax Demo</h1></div></div></body></html>

The HTML with CSS

Next, we will add some basic styling. This specifies the image we will be using as a background, in this case img1.jpg. Feel free to change it to whatever image you wish. We will set our div element’s height to 1500px, however you can make it as tall as you would like.

<html><head></head><body onload="startParallax()" style="width: 100%; margin: 0; padding:0;"><div id="topDiv" style="height: 1500px; background: url('parallaxDemoBackgroundImage.jpg') no-repeat;"><div style="position: absolute; width: 40%; margin-left: 30%; top: 70%; text-align: center; padding: 1em 0; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(16, 16, 16, 0.7); border-radius: 1em; box-shadow: 3px 3px 4px rgba(64, 64, 64, 0.3);"><h1 style="font-family: sans-serif;">A Simple Parallax Demo</h1></div></div>

Adding the Javascript

Next, we need to add the javascript. This is the same script that we created before.

<script>
var topDiv = document.getElementById("topDiv");var speed = 1.5;window.onscroll = function(){var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";}

The Final Page

The final page should now look like:

<html><head></head><body style="width: 100%; margin: 0; padding:0;"><div id="topDiv" style="height: 1500px; background: url('parallaxDemoBackgroundImage.jpg') no-repeat;"><div style="position: absolute; width: 40%; margin-left: 30%; top: 70%; text-align: center; padding: 1em 0; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(16, 16, 16, 0.7); border-radius: 1em; box-shadow: 3px 3px 4px rgba(64, 64, 64, 0.3);"><h1 style="font-family: sans-serif;">A Simple Parallax Demo</h1></div></div><script>
var topDiv = document.getElementById("topDiv");var speed = 1.5;window.onscroll = function(){var yOffset = window.pageYOffset;topDiv.style.backgroundPosition = "0

 

Photo Credit: Takashi(aes256) via Flickr



Scroll To Top