Get the latest Parallax Tutorials

Get notified of new tutorials for creating parallax scrolling websites directly in your inbox.

First Name | Email:

No Thanks

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";

}

</script>

</body>

</html>

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 = "0px "+ (yOffset / speed) + "px";

}

</script>

</body>

</html>

Click here to view the live parallax demo.

Photo Credit: Takashi(aes256) via Flickr

Need more Parallax Tutorials?

Need more tutorials for creating parallax scrolling websites? Sign up and we'll send you an email to let you know when we find them!

First Name | Email:

No Thanks

Parallax Web Design

Parallax website design moves one part of your website at a different speed than the rest of your page. This often creates a 3D-like effect, adding depth and interest to your webpage design. The resources, including themes, tutorials, and examples, are designed to help you build a website with parallax scrolling.

Parallax Web Design Resources

Parallax Themes

WordPress & Drupal Themes for creating websites with 3D-depth effects and animations using parallax scrolling

Parallax Theme Research

Our Analysis of Parallax Scrolling in Premium Website Themes shows that parallax design is a popular design trend, with alomost 1/3 of new themes published each month advertising parallax scrolling elements.

Parallax Wordpress Themes

Top Ranked Parallax WordPress Themes: The top WordPress themes with parallax scrolling, as calculated by our WordPress Theme Search Engine

10 Parallax WordPress Themes

10 Parallax WooCommerce Wordpress Themes

Amazing Wordpress Themes with WooCommerce and Parallax Scrolling

7 Amazing Parallax Wordpress Themes

5 Wonderful Parallax Wordpress Themes

Parallax Drupal Themes

6 Parallax Drupal Themes

6 Professional Parallax Drupal Themes

About Parallax Websites

Parallax Technologies

Tools to create parallax scrolling websites: jQuery, Skrollr.js, Stellar.js, CSS

Parallax Tutorials

A Simple Parallax Scrolling Tutorial about how parallax scrolling works.

Tutorials for creating parallax websites using: jQuery | Stellar.js | Skrollr.js | CSS

Parallax Scrolling Sites

Great examples of parallax scrolling websites: 101 Great Parallax Websites | 101 More Great Parallax Websites

Website Tools

These tools are designed to help you build your website, add content, and improve your website's appearance.

Javascript Graphing Libraries

Add charts & graphs to your website using: Chart.js | Chartist.js | DC.js | Morris.js | Timeline.js | Vivagraph.js

Parallax Website Design Techniques

Create websites with parallax scrolling using: jQuery.js | Stellar.js | Skrollr.js | CSS

Website Theme Resources

Website themes are an easy to create a great website quickly. They provide a beginning point for you to build your websites, giving you layout, code, and functionality to work with. These resources are made to help you find the right theme to help you start building your website.

Website Theme Research

Our comprehensive, analytical research into the website theme industry, focusing on trends and major changes affecting website designers and website theme customers.

Theme Forest Analysis Report

Our Fall, 2014 Theme Forest Analysis Report shows a major shift in the theme marketplace. The empirical assesment of Theme Forest over a 28 month period indicates a series of interesting trends and patterns.

Analysis of Parallax Scrolling in Website Themes

Our assement of the popularity of parallax scrolling in website themes published on Theme Forest shows that parallax design elements are an increasingly popular trend.

Wordpress Themes

Top Ranked WordPress Themes

The best WordPress themes for a new website, as calculated by our WordPress Theme Search Engine. These themes are selected for reliability, quality, popularity, and many other factors.

Parallax Wordpress Themes

Top Ranked Parallax WordPress Themes: the best WordPress themes for creating websites with parallax scrolling, as ranked by our WordPress Theme Search Engine

10 Parallax WordPress Themes

10 Parallax WooCommerce Wordpress Themes

Amazing Wordpress Themes with WooCommerce and Parallax Scrolling

7 Amazing Parallax Wordpress Themes

5 Wonderful Parallax Wordpress Themes

eCommerce Wordpress Themes

Top Ranked eCommerce WordPress Themes: the best WordPress themes for creating eCommerce websites, as ranked by our WordPress Theme Search Engine

10 Parallax WooCommerce Wordpress Themes

5 Great eCommerce Website Themes, Built For WordPress

6 Amazing Wordpress eCommerce Themes

5 Professional eCommerce Themes for Selling on Your Website

10 Great eCommerce WordPress Themes with WooCommerce

Finding WordPress & Drupal GPL Themes

How to find WordPress and Drupal themes licensed under the GNU Public License. These themes offer increased freedom and the ability to use your theme on multiple sites.

Drupal Themes

These themes are built for use with the Drupal content management system. Drupal is wonderful and quite popular for business websites.

Parallax Drupal Themes

Themes for creating parallax-scrolling 3D-depth-like effects and animations as visitors scroll down a page.

6 Parallax Drupal Themes

6 Professional Parallax Drupal Themes

Portfolio Drupal Themes

Themes built for making professionally designed portfolios.

5 Professional Drupal Portfolio Themes

5 Amazing Drupal Portfolio Themes

Corporate Drupal Themes

Themes built for making small, medium, and large business websites.

6 Corporate Drupal Themes

7 Professional Drupal Corporate Themes