How To Create a Parallax Scrolling Website | Part 1

One of the biggest trends in web design is the famed parallax scroll effect. In this 2-Part tutorial I’m going to show you how to create a basic parallax website with some simple makeup using a plugin called stellar.js.

Download Source Files View Demo

---

Introduction

The parallax scrolling effect has been around for a while now and with the popularization of flat design it’s become an essential skill for any developer or designer. Usually parallax websites use some form of story to emphasise the effect and user experience. As the user scrolls the page, a story is told through a virtual journey of animation and interaction.

---

Understanding Parallax Scrolling

You might have heard the word floating about, particularly amongst ‘savvy’ designers who throw it around as a sort of “I’m a really cool designer” statement. However if you’re not sure exactly what it means, it might seem a little ambiguous or even complicated. Let’s clear things up a little.
The actual word parallax is derived from the Greek παραλλαξη (parallaxis), which means alteration. Objects which are closer to the eye have a larger parallax than objects which are in the distance. This means that objects which are closer to us can appear to move faster than objects in the background.
In terms of web design, this is most commonly achieved through layering objects and backgrounds and applying different scrolling or animation speeds to create the illusion of depth.
Technically, the effect is created by created through keeping the viewport in a fixed position and scrolling a background, along with “foreground” objects through the viewport. If you’re a visual thinker like me, the best way of understanding this is through a diagram.
Very general parallax scrolling theory

A closer look at how the background/view-port scrolling relationship works.

---

Parallax Examples

Now that we better understanding what a parallax design is, let’s take a look a few examples on the web:





If you play close attention to the relationship between the “background” and “foreground” objects, as well the backgrounds, you’ll notice that although all these examples are considered “parallax”, they each use a slightly different technique to produce the effect.
It’s also worth noting that the best examples use some form of story-telling to deliver an idea or a message. This is what makes a parallax effect so great, the ability to tell a story through user-interaction.

---

Setting Things Up

As with most projects, the best place to start is pen and paper. Before you jump into any code, create a quick sketch up of how your page will work. If you’re working with a web designer or you design yourself, you should then fully design your layout in something like Photoshop before starting.

---

Project Overview

This tutorial will be split into 3 parts. In this part we’ll create the basic layout and scrolling effects for the backgrounds. In Part 2, we’ll then create our foreground and background objects. Finally in Part 3, we’ll animate our objects for maximum parallax effect.
Let’s take a look at our project setup:

To demonstrate a parallax website, I’m making a mock-up website for a free typeface called Prime, which comes from independent font foundry FontFabric. If you’re a typography enthusiast their site is definitely worth checking out. We’ll be using a few of the images from their font mock-up to display a folio style promotional website for the typeface.
We’ll create a parallax scrolling background, along with a navigation bar which indicates the slide which is being displayed and a download link.

---

Plugins

To achieve our desired effect we’ll be using 3 jQuery plugins:

Stellar.js

Stellar.js is a jQuery based plugin by Mark Dalgleish which makes it easy to create parallax scrolling sites. This forms the basis of our parallax design by creating the scrolling effect. There are other plugins available for more complex effects, however this one is really simple and easy to use.

Waypoints

Waypoints is a jQuery plugin from Caleb Troughton which executes a function whenever you scroll to an element, allowing the navigation to detect which slide is being displayed.

jQuery Easing

jQuery easing is a plugin for advanced easing effects. We’ll use this to add a smooth transition when we click on a navigation link.

---

Document Setup

Let’s take a look at our documents setup. Mainly our external script references so you know how things will be setup in the head.
Here we have referenced our external style-sheet, CSS reset, jQuery library and plugins, along with our own custom JavaScript scripts.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 

</head>

---

Slides

Before we worry about the navigation let’s focus on the slides, which will form the base of our setup. You can do this through <ul> list, however I find it easier to just use divs.

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0"></div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0"></div><!--End Slide 3-->

Each div is given the same class of “slide” for general styling and then a subsequent id of “slide1” – “slide2” – “slide3” and so on. We then use the HTML5 data attribute to name the slide – i.e. “data-slide=’number’ ”.  Finally we add another data attribute of  ”data-stellar-background-ratio”. This is specific to the stellar.js jQuery plugin and tells the plugin at what ratio the speed of the element should scroll.
The “stellar ratio” sets the speed that the background or the element will scroll. A ration of 0.5 will cause an element to scroll half the regular scrolling speed, a ratio of 1 will have no effect, while a ratio of 2 will make the element scroll at double the speed.
Like we discussed earlier, to create an effective parallax effect of depth, you want the background scrolling at a single speed, while varying the scroll-speeds of objects. For the moment, we’ll just setup up the backgrounds and navigation, however once we start adding scrolling objects, it’s important to understand how to effectively create depth. We’ll get into this in more depth in Part 2.
Background scrolling is where a lot of parallax designs can fall-short. To create a true parallax effect, you want the backgrounds to be fixed on the viewport, rather than just stack vertically.
The theory for our background-scrolling is that the slides are stacked in order of top to bottom, however rather than simply scrolling down through each slide, they are all fixed into the center of the viewport. This way as you scroll from one slide to the other the viewport displays a corresponding amount of each slide relative to the scrolling amount, while keeping everything centered. This creates the illusion of them being stacked upon each-other and really kicks in the parallax effect.

---

The Navigation Markup

The navigation will remain in a fixed position throughout the site and displays colored circles with a white center when the corresponding slide is active. We’ll be creating the circles exclusively in CSS, however we set our box-shadow (circle outline) and background color inline in the HMTL. This way we can simply change the background color in our CSS when the link is active.
You’ll notice for each navigation link, we apply the “data-slide” of the corresponding slide. We’ll then setup the links in jQuery later so that each link slides to a slide.

<ul class="navigation">
<li data-slide="1" style="box-shadow: 0 0 0 3px #1a1a1a;background-color: #1a1a1a;" ></li>
<li data-slide="2" style="box-shadow: 0 0 0 3px #ffee00;background-color: #ffee00;"></li>

---

The CSS

The CSS can get a little messy if you don’t understand things, however because we’re just setting up our backgrounds, it’s relatively straight forward.
For the slides we use some pretty simple CSS using the “background” attributes to set the color, size, position and image for the backgrounds.

.slide {
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#slide1 {
background-image: url(../images/prime01.png);
background-color: #1a1a1a;
background-repeat: no-repeat;
background-position: center !important;
-webkit-background-size: 700px 300px;
-moz-background-size: 700px 300px;
background-size: 700px 300px;
}

For the navigation we set up the fixed <ul> and then simply create our circles for the corresponding <li>’s. Finally we add a hover/active class which we’ll toggle later using jQuery.

.navigation {
position: fixed;
z-index: 1;
background: rgba(255, 255, 255, 0.2);
padding: 20px;
}
.navigation li {
width: 10px;
height: 10px;
border-radius: 5px;
margin: 0 auto;
position: relative;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-bottom: 25px;
}
.navigation li:hover,.navigation li.active {
background-color: #fff !important;
cursor: pointer;
}

Finally we add a download button as well as an arrow on the first slide.

.download {
background: url(../images/download.png) no-repeat;
position: fixed;
right: 50px;
top: 20px;
height: 32px;
z-index: 1;
color: #fff;
text-decoration: none;
padding-top: 30px;
text-align: center;
width: 70px;
background-position: center -3px;
}

.arrow {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
background-image: url(../images/arrow.png);
-webkit-background-size: 64px;
-moz-background-size: 64px;
background-size: 64px;
background-position: center 600px !important;
background-repeat: no-repeat;
background-attachment: fixed;
}

---

The jQuery

Ok here’s where things really come to life. We have a number of things we need to do, mainly for the navigation and waypoints. Also I’ve overridden the browser’s default mouse-wheel and keyboard scroll functions with an easing function. This way, for browsers like Chrome, when a user scrolls with the mouse-wheel or the keyboard, the effect eases rather than being blocky.
I’ve noted the jQuery below so you know what’s going on.

jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache variables for Stellar.js in the document
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Set up for waypoints navigation
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}

});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}

//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});

//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//Mouse-wheel scroll easing
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 350;
var distance = 100;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 50;
else if (event.detail) delta = -event.detail / 1;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {

$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}

//keyboard scroll easing
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});
});

---

Summary

Parrallax scrolling is a fantastic effect in web design and development and continues to evolve as people continually push the boundaries on what’s possible. Today I have shown you the basic setup for a parallax scrolling website, using some pretty simple markup and plugins.
I hope through reading and interacting with this tutorial, you have a better understanding of how to create a parallax scrolling website.

---

Download Source Files View Demo

Part 2 >>