Create a Parallax Scrolling Website Using Stellar.js - Aaron Lumsden | Aaronlumsden.com Aaron Lumsden

Create a Parallax Scrolling Website Using Stellar.js Written by Aaron Lumsden on 18 Jun 2012

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.

Parralax Scrolling Website – The Final Design

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.

What is this parralax effect thing?

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.