Our primary focus was on creating a great interactive storytelling experience. In our opinion, technologies are independent of concept. Wieden+Kennedy (W&K), the guys behind the Nike Better World Website support this: 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.

This, in my opinion, is what makes a parallax scrolling site a success. The examples above all take you on some form of journey or story, and they do so in a variety of different ways. Take a look at some examples which demonstrate parallax effects. 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. This means that objects which are closer to us can appear to move faster than objects in the background. Objects which are closer to the eye have a larger parallax than objects which are in the distance. The actual word parallax is derived from the Greek παραλλαξη (parallaxis) which means alteration. 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. 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 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'. Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight.

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. 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. 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. 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. Interested in saving some time and making sure you're using modern best practices? There's a great responsive jQuery slider plugin on Envato Market that could do the job perfectly! It's already used on over 150,000 websites. 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. One of the biggest trends in recent modern web design is use of parallax scrolling effects.

Parallax scrolling website