Article

Robert Yardy
Robert Yardy 6 March 2014
Categories Technology

Remember the excitement you got when Cilla's Blind Date screen rolled back?

Why am I comparing scrolling down a parallax website to the singletons on both sides of the Blind Date screen?!

Remember the excitement you got when Cilla’s Blind Date screen rolled back?
 

Anyone above the age of 25 will remember the highlight of Saturday night TV (which is high praise indeed when you had the likes of GladiatorsBig Break and The Generation Game on air) Cilla Black’s Blind Date. They don’t make them like that anymore!

 

Do you remember the excitement of waiting to see the reactions of the chosen date and the person who read the questions (e.g. if you were a fruit what would you be?). As the screen rolled back neither knew what to expect. Well, that’s how we felt when researching for this blog post about awesome parallax websites. As you scroll down a page you just don’t what’s going to appear! 

 

“Mmmm, you’re gonna have to give me more info than just Blind Date analogies” I hear you mutter. Ok, we will…

 

It is widely believed that the first parallax website was built by Ian Coyle for the Nike Better World campaign (NB: Nike always seem to be at the forefront of innovative marketing techniques. See our blog post on Gamification). The term is derived from the Greek word “parallaxis” which means alteration.

 

Although parallax web design has only been extensively discussed in the last couple of years, especially this year, it first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay.  

 
Parallax backgrounds
 
 

It is the web design technique of using CSS to make different layers on the web page move at different rates. When a user scrolls down a page they will be presented with content, such as photos, videos, text etc coming in from different angles and not just all moving down the screen together. It elevates the interaction a user has with a web page which of course can only be a good thing! 

 

Like with all new web design techniques that become very popular some get it massively wrong. So for every really cool parallax site you are likely to see one that has clearly incorporated it because the web design agency know it is a hot topic. These sites are usually really complicated or make no sense as to why content is being shown when and where it is. Worse still, is when content overlaps content that should have moved!

 

We are not in this business to criticise other agencies so we are not going to show you a load of bad examples of parallax sites. We would much rather show you some excellent examples. Therefore, below are 4 websites we have seen recently seen that have applied parallax brilliantly:

 

National Geographic Channel – Killing Kennedy

 



 

This is probably the best use of parallax we have ever seen! The National Geographic website, http://www.kennedyandoswald.com, used for the Killing Kennedy TV programme is simply brilliant.


Of course it is helped by a fascinating story but the way in which the site expertly displays and communicates content is something to admire. There are links for photos, speeches, descriptions of people in photographs and many more cool features.





We really like the way the sound changes as you scroll down the screen. The attention to detail is remarkable such as the diner background noises used for the image below.

 

National Geographic Channel – Killing Kennedy

Puma

Puma

The Puma microsite for their running shoe Mobium is simply brilliant. As you scroll the athlete runs along a stage (shown above) with various content links appearing in the form of little green circles so let’s call them “content circles”. 

 

The image below shows an example of what happens when you click on one of these content circles. In this particular instance a video appears.

 
Puma

Madwell

Going back to the Blind Date analogy, our reaction to this website would similar to our reaction if the screen rolled back and Megan Fox was standing on the other side (wow, we really do love websites huh?).

  
Madwell

This creative agency showcase their work brilliantly as the user scrolls down the page. There is also the functionality to open up a traditional menu screen for their work (see image below) and not use the parallax features.

 
 
Madwell

Life of Pi

 

Life of Pi

 

Of course we are bias but to us web design in an art form and this website is akin to the Sistine Chapel. The artwork is simply stunning, especially the whale splashing into the sea (scroll down to the bottom of the page). 

 
 
Life of Pi

 

There is so much great content to look at with lots of videos, photos, text, stats about the film and loads more. 

NB: The book is better than film.

 
Life of Pi
 

What are the downsides? 

There are downsides to a parallax site, even those as cool as the 4 above. The major problem is that a single page obviously reduces the SEO possibilities as only one set of meta information, one effective h1 tag and one URL are possible.

 

Although parallax can be applied for mobile the user experience often suffers. Out of all the sites that we have used for this article two are using parallax design for a mobile. 

 

Madwell have no mobile site at all, just a static page with contact info and The Life of Pi website instructs you to open up the site on a tablet or desktop. 

 

The Puma Mobium microsite still uses parallax but the user experience is massively diminished and it becomes very annoying as you click links that you don’t to click.

 

The Killing Kennedy website also uses parallax design for mobile but there is so much content on the page, loading times take a massive hit and when scrolling you are left hanging.

 

Bring back Blind Date!

So parallax sites have a few draw backs but when they look so cool they are more than worth it. If you go down this route just make sure that you are doing it for the right reasons and enhancing the user experience.

 

We hope that you like these websites as much as we do and Cilla, if you’re reading this which we assume you are as we know you are a big parallax fan, get Blind Date back on TV (but don’t sing!).

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
Promote Your Blog On These 30 Places

Promote Your Blog On These 30 Places

Social Media channels are one of the best ways to promote your blog content, but you shouldn’t stop there. Besides Social Media, there are more available places on the web which can be a great marketing tool for your blog promotion. I’m bringing you 30 proven places where you can promote your blog content and get great results.

Aleksej Durdevic
Aleksej Durdevic 7 December 2016
Read more
Top 10 Digital Branding & Marketing Trends for 2017

Top 10 Digital Branding & Marketing Trends for 2017

It’s time to re-evaluate and rebalance the digital approach for your company. Here are the Top Digital Branding & Marketing Trends for 2017 to watch for. The probing minds at the Borenstein Group, a Top Washington DC Digital Marketing and Branding Agency, have done the homework for you. Use it or lose it.

Gal Borenstein
Gal Borenstein 7 December 2016
Read more
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
What Mobile App Design Looks like in 2017

What Mobile App Design Looks like in 2017

They say ‘move with the time or the time will leave you behind’. Being a startup it is important for you that you understand the trends, and amalgamate them in your business in order to attain the targets.

Nasrullah Patel
Nasrullah Patel 6 December 2016
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more