Create a Parallax Scrolling Website Using Stellar.js

One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I’m going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.

Introduction

The parallax scrolling effect has been popular ever since sites such as Nike’s Better World introduced it on their websites a few years ago. The parallax effect with regard to interfaces has been around since the 1980′s when it was first used in video game titles and subsequently in games themselves. More recently it started to make an appearance in web interfaces – you’ll be familiar with silverbackapp which used the effect as part of the header.

When combined with the scrolling functionality of a website, parallax scrolling effects can have a strong visual impact, especially when combined with some form of story which takes you on a journey.

Para…What?

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. – Wikipedia

So what exactly is the parallax effect? Well it’s probably one of the things that your clients refer to when they blindly say “I want my site HTML5″. Whenever clients ask me for an “HTML5″ site, I have to ask them specifically how they interpret the meaning HTML5 – at the moment it just seems to be the buzzword that clients keep saying to me without really understanding what it means.

So is it HTML5? Sure HTML5 does have a part to play in the parallax scrolling effect but it’s more than HTML5, it also utilizes some form of javascript, such as jQuery, and wouldn’t be possible without a little bit of CSS3.

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.

Layering up multiple backgrounds and objects (such as images) and then allowing them to move at different speeds creates a sensation of depth and dimension.

Parallax in Action

Take a look at some examples which demonstrate parallax effects.

Every Website Tells a Story

The examples above all take you on some form of journey or story, and they do so in a variety of different ways. This, in my opinion, is what makes a parallax scrolling site a success. The key to making it interesting and unique is by focussing on a good story and concept, then using the effect in creative and imaginative ways.

Wieden+Kennedy (W&K), the guys behind the Nike Better World Website support this:

In our opinion, technologies are independent of concept. Our primary focus was on creating a great interactive storytelling experience. – Wieden+Kennedy (W&K)

How Our Site Will Work

To demonstrate one way of implementing parallax scrolling into your website I’ve opted to show you a simple four slide website that uses the effect on different backgrounds and images. I’ve also added a navigation in the left hand corner which will scroll to a specific slide on the site and will also change size to reflect the active slide number. I’m also using the web font Bebas, though you’re free to use something else if you wish.

Here’s how our folder structure will appear:

The Plugins Used

Stellar.js

To help me achieve this I’m using the Stellar.js, a jquery plugin by Mark Dalgleish which makes it easy to create parallax scrolling sites. There are other plugins available to help you do this which I’ve listed at the bottom of this article. I’ve opted to use Stellar.js as it’s fairly straightforward to implement and, although not demonstrated during this tutorial, it can be optimized to work on smart device platforms such as iOS.

Waypoints

I’m also going to use jQuery waypoints by Caleb Troughton. Waypoints is another jQuery plugin which executes a function whenever you scroll to an element. This allows the navigation on the site to highlight which slide we are on according to the position of the scrollbar.

jQuery Easing

jQuery easing is a plugin from GSGD which offers advanced easing options. We will be using this to add a nice easing movement when transitioning from slide to slide.

The HTML Markup

Kicking off our index.html we add the HTML5 doctype and then create the head section. This consists of a CSS Reset followed by our style sheet ‘styles.css’. We then add the jQuery library followed by our custom jQuery file ‘js.js’. This is then followed by the three plugins, ‘jquery.stellar.min.js’,'waypoints.min.js’ and ‘jquery.easing.1.3.js’.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a parallax Website using Stellar.js</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>

The next element in our html is the image of the Envato logo which remains in a constant fixed position throughout the whole site. To this we add a class of ‘envatologo’ so that we can set the positioning of it later when we code up the CSS.

<img class="envatologo" src="images/envatologo.png">

The Slides

The four slides use the same markup:

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
		<a class="button" data-slide="2" title=""></a>
	</div><!--End Slide 1-->

We use a class of ‘slide’ that will be used as a general style for all the slides. Each slide is then given an id of ‘slide’ followed by the slide number ie ‘Slide1′. We use the HTML5 data attribute and name it ‘data-slide’. This will allow us to target it using jQuery. Another data attribute of ‘data-stellar-background-ratio’ is added. This is specific to the stellar.js jQuery plugin and tells the plugin at what ratio the speed of the element should scroll.

The ratio is relative to the natural scroll speed, so a ratio of 0.5 would cause the element to scroll at half-speed, a ratio of 1 would have no effect, and a ratio of 2 would cause the element to scroll at twice the speed.

All slides except for slide four have a button that will allow us to scroll to the next slide. To this we add the ‘data-slide’ attribute with the value of the next slide number. This is so the button knows what slide is next so that we can pass this value to jQuery. The majority of the slides also have a span with a class of ‘slideno’; simply a large text version of the slide number which appears in the bottom left hand corner of most slides. This could also be used for titles.

<span class="slideno">Slide 1</span>

On slides three and four we also add some image elements to the ‘slide’ div. These images will give a real insight into the parallax effect that we are creating. We wrap these inside a ‘wrapper’ div that will be centralized and is ’960px’ wide, this is just to ensure that it displays OK across all desktop monitor sizes.

Each image has a ‘data-stellar-ratio’ attribute attached to it. This again is stellar.js specific and tells the plugin at what ratio of speed we should scroll the element at.

<div class="wrapper">
			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
</div>

The CSS

Luckily for us there’s not too much involved with the CSS. It’s basically styling a few simple elements, but the majority of it is for positioning some of the image elements.

The first thing we need to do with our CSS is bring in the BEBAS font using @font-face. We then add that to the html to set the font for the site. We also set the width and height of the html and body to 100%. This will allow our slides to adopt the full width and height of the user’s screen.

@font-face {
	font-family: 'BebasRegular';
	src: url('font/BEBAS___-webfont.eot');
	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
	url('font/BEBAS___-webfont.woff') format('woff'),
	url('font/BEBAS___-webfont.ttf') format('truetype'),
	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
	font-weight: normal;
	font-style: normal;
	}
html,body{
	font-family: 'BebasRegular';
	width:100%;
	height:100%;
}

The Navigation

The main navigation is given a ‘fixed’ position to keep it in the same place throughout the site. We offset this 20px from the top to give a little bit of space above it and set the z-index to 1 to ensure that this is on the top layer of the site.

The actual list is just the styling of the text with a border across the bottom to act as an underline. This has a width of 53px. A transition is also added so that it animates from its standard state to its hover state. I’ve used the -webkit- prefix here just to keep the code short, but the full source code which can be downloaded above contains all vendor prefixes.

The hover state also uses the same properties as the class ‘active’; basically just an increase in font size and width. The ‘active’ class is used by jQuery to style the relevant slide which is in view of the browser window.

.navigation {
	position:fixed;
	z-index:1;
	top:20px;
}
.navigation li {
	color:#333333;
	display:block;
	padding: 0 10px;
	line-height:30px;
	margin-bottom:2px;
	font-weight:bold;
	-webkit-transition: all .2s ease-in-out;
	border-bottom:1px solid black;
	text-align:left;
	width:53px;
}
.navigation li:hover,
.active {
	font-size:25px;
	cursor:pointer;
	width:100px!important;
}

The envato logo is given some positioning styles just to ensure that it remains in the centre of the screen. Similarly to the navigation this is also given a z-index of ’1′ to ensure it stays on top.

.envatologo {
	position:fixed;
	top:50%;
	left:50%;
	width:446px;
	margin-top:-41px;
	margin-left:-223px;
	z-index:1;
}

Now we move onto styling of the actual slides. We give them a background-attachment ‘fixed’ property. The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page, so comes in useful for background-images (such as used on slide four). For this example we’ve used a wallpaper by Philipp Seiffert which can be downloaded here. We set the position of the slide to ‘relative’. This is to that we can absolutely position the classes ‘slideno’ and ‘button’ against the slide as opposed the actual document.

The box shadow is purely for decoration purposes and adds a nice drop shadow to the top inset of each slide.

.slide {
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
	width:960px;
	height:200px;
	margin:0 auto;
	position:relative;
}
.slideno {
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}

The .button is for the button at the bottom of the page which allows us to progress to the next slide. We’ve positioned it at the bottom centre of each slide and have used an image of an arrow as the indicator.

.button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color:#333333;
	background-image:url(../images/arrow.png);
	background-repeat:no-repeat;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}

The styling for each individual slide is relatively simple and follows the same pattern each time. Slide one has a background color of ‘#5c9900′. Slide two also has a background color set on it. Slide two also contains images and we can target each one by using the CSS Selector nth-child(n). This selector can be described as

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements.

So we’re basically styling each image in the order they appear in our markup. We’re simply positioning them relative to the wrapper of the slide.

/******************************
 SLIDE 1
*******************************/
#slide1{
	background-color:#5c9900;
}
/******************************
 SLIDE 2
*******************************/
#slide2{
	background-color:#005c99;
}
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}

Slide three follows the same suit as slide two.

/****************************** SLIDE 3 *******************************/
#slide3 {
	background-color:#b6c10b;
}
#slide3 img:first-child {
	position:absolute;
	top: 700px;
	left: 300px;
}
#slide3 img:nth-child(2){
	position:absolute;
	top:100px;
	left:100px;
}
#slide3 img:nth-child(3){
	position:absolute;
	top:150px;
	left:300px;
}
#slide3 img:nth-child(4){
	position:absolute;
	top:450px;
	left:300px;
}
#slide3 img:nth-child(5){
	position:absolute;
	top:200px;
	right:300px;
}
#slide3 img:nth-child(6){
	position:absolute;
	top:100px;
	right:300px;
}

Slide four is slightly different than the previous two slides as it doesn’t contain any image elements or a background-color, but instead uses a background-image. We’ve also given it the CSS3 property ‘background-size:cover’. This basically sets the background-image to cover the entire browser window and will resize as the browser window resizes. We have also added a line of text on the last slide which we have styled and given a class of ‘parallaxbg’

/******************************
 SLIDE 4
*******************************/
#slide4{
	background-image:url(../images/Slide4/desktop4.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}

The jQuery

The jQuery really is where this thing starts to come to life. I’ve commented the code so that you can see exactly what is happening.

jQuery(document).ready(function ($) {
    //initialise Stellar.js
    $(window).stellar();
    //Cache some variables
    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');
    //Setup waypoints plugin
    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);
    });
});

Just a Few Points

If you look at slide two of our example, you will notice the 3D bubbles. I have added a slight gaussian blur to some of these, mainly to those at the very foreground and background. Combining these with sharply focused bubbles adds to the sense of depth that parallax creates. This is something that you should maybe consider when trying to get good depth to your site.

A lot of sites that utilize this effect do tend to be quite image heavy, make sure you compress your images as much as you can (without sacrificing quality). If after compression it’s still taking quite a while to load then consider adding a loader to your site.

Conclusion

Parallax scrolling is one of the most loved effects of recent times and people are constantly pushing the boundaries with it. Here today I’ve shown you how to setup a basic website that utilizes parallax scrolling. The demo that I’ve shown today is a relatively simple site for learning purposes. For those of you who are about to create a site using this effect then I urge you to spend time on the concept and story as this is what makes them unique, shareable and indeed a pleasure to browse. It’s about how you can utilize this effect wisely and not just using it for the sake of using it.

I hope you’ve enjoyed reading about parallax scrolling and I’d love to see how you guys have utilized it in your own sites, feel free to leave links to them below. Until next time!

Further Links Reading And Resources

• Behind the Scenes at Nikes Better World.
• 21 Examples of Parallax Scrolling Websites.
• Scrollorama A parallax plugin with some other great features.
• Create a Sticky Navigation Header Using jQuery Waypoints