Get found more often, more effectively, by more customers.
Written by: Sean McColgan
Infographics: love them or hate them, you can’t escape them. With the rise of the infographic at all time high (a reported mention of ‘infographic’ every 1.7 seconds on the 16th Aug), many are now asking where next for this visual medium? For many, Interactive HTML5 Infographics are the next stage in the evolution of the infographic, a sentiment I personally agree with. However, today I’m going to look into another engaging type of content that is crushing it when it comes to social sharing, brand engagement and back link acquisition: parallax scrolling landing pages.
/GeekMode On – Parallax scrolling is a special scrolling pseudo-3D technique in computer graphics, first popularized in the 1982 arcade game Moon Patrol. Check out the effect for yourself with this video compilation of NES games that used parallax scrolling: Watching the video you can see how the games foreground and background create an illusion of depth and feeling of immersion. The technique itself grew out of the multiplane camera technique, which was invented by Walt Disney in 1940.
Let’s look at 12 examples of parallax scrolling sites that are engaging and entertaining:
Travel to Atlantis by scrolling 20k leagues below the sea with this clever interactive infographic. The Lost World’s Fair is a collaboration between Microsoft, Jason Santa Maria, Frank Chimerocame, Naz Hamid and the creative team at Paravel. The objective of the ‘Lost Fairs’ was to highlight the new capabilities in IE9. Tweets: 2,135 Facebook likes: 2,000 External backlinks: 5,483 http://lostworldsfairs.com/atlantis/
Volkswagon are no stranger to creating awesome viral content. Here they create one of the most intricate parallax sites of them all to celebrate the release of its 21st Century Beetle. Scroll from 1945 to 2011. Tweets: 950 Facebook Likes: 3000 External Backlinks: 534 http://beetle.de/full/
NetLabel Kei Bunkai-Records released a free 18 track album of Handcrafted elect-lo-nica featuring Go qualia, Kanoukaoru and Nyjunkies. The site uses HTML5, CSS3 and some custom data attributes. Tweets: 1476 Facebook likes: 323 External backlinks: 414 http://bunkai-kei.com/special/Elect-LO-nica/
Taking inspiration from the Nike Better World parallex scrolling site, Mark Zeman Digital Creative Director at Shift turned the parallax idea on it’s head. “What if we took the idea of scrolling through a vertical environment and did it for real with a giant 48 metre real-life scroll bar that lets you scroll a camera through four of New Zealand’s most amazing locations?” – yeah that works! It was built using HTML5 canvas with a Flash fall back for IE 7-8. I reached out to NewZealand.com for some data on what the impact of the new layout has had on engagement. This is what they said: “Since the relaunch of newzealand.com we’re seeing that visitors on the new site are more engaged – we have reduced the bounce rate on our splash (entry) page by more than half, and the bounce rate from our home page has also decreased.” “We know that visitors who are embracing the site’s tagging functionality are more engaged, and those visitors are viewing more than double the number of business listings compared to on the old site, and we’ve increased the number of visitors we refer to travel sellers by 15% so far.” – Kate Campbell of New Zealand.com Tweets: 950 Facebook Likes: 3000 External Backlinks: 5,112,331 http://newzealand.com
Simple. Beautiful. Beyond Smart. That’s the tagline of Googles Galaxy Nexus, which you can apply using this killer promotional squeeze page. This site is prime example of conveying a brand’s message and values through web design. Tweets: 34,743 Facebook likes: 58,000 External backlinks: 51,239 http://www.google.com/nexus/
“Fancy pants teaser website for an iphone app” was how one person described it on Twitter. For me this site is up there alongside Ben the Bodyguard as one of the best examples of a teaser site that generates mass hype around an iPhone app using parallax scrolling. Apart from having an insanely great landing page, what does Nizo actually do? It turns your iPhone into a camera that captures all the charm that only Super 8 film can deliver – Awesome! Tweets: 10,473 Facebook Likes: 3000 External Backlinks: 4,437 http://nizoapp.com
Beer, SXSW, HTML5, CSS3 and an inception style interface – what more do you need to achieve the sites objective of getting the word out of the event? So much so that web folk are still talking about it 8 months after the event! The site itself has 3 modes, depending on which features are supported by the users browser.
Hobo Lobo, according to it’s creator Stevan Živadinović, is a web-time story about a city, its scruples, some rats, a lobo, his woodwind and the stuff that goes down. For us it’s one of the best examples you will see of creative storytelling harnessing the power of parallax scrolling. Tweets: 4269 Facebook likes: 2000 External backlinks: 6,401 http://hobolobo.net
Touch optimised parallax site by Lenova featuring a skydiving laptop! Watch the Thinkpad T420 compete against gravity and scroll through the sky while reviewing product specs. Tweets: 550 Facebook likes: 673 External backlinks: 327 http://rapidboot.com/us/
Google launched this interactive guide for Android developers to provide insights into how to get their app discovered through promotion, earn enough money to quit their day job and evaluate their current flight path to ensure they’re headed in the right direction. Learning how to market your Android app is much more fun whilst flying a rocket! Tweets: 3382 Facebook likes: 888 External backlinks: 2,570 http://guidetotheappgalaxy.com
How do you make a mobile data protection application sexy? You promote your app through a super sleek parallax scrolling site where you enable the user to play the character of Ben and walk along scary, dark streets, while providing dialogue about security. Tweets: 15,134 Facebook likes: 19,000 External backlinks: 14,136 http://benthebodyguard.com/
Nike’s Better World wasn’t the first site to use parallax scrolling, but it was the first to set alight the imagination of the web design community on how far you can push the boundaries with parallax scrolling to enable a great story telling experience. The site was a collaboration between Nike & Wieden+Kennedy “In our opinion, technologies are independent of concept. Our primary focus was on creating a great interactive storytelling experience.” – WK Tweets: 12,918 Facebook likes: 16,000 External backlinks: 5,659 http://nikebetterworld.com
So there we have it – parallax scrolling, a graphics technique that debuted on an obscure game for the Atari ST in 1972, makes it way to the web thanks to the advancements of HTML5, jQuery and CSS3. These kind of interactive sites are engaging uses with rewarding experiences that they love to share with their social connections.
Note: I have included the backlinks and social sharing data for review – obviously these data points are not the be end all of a successful campaign but give a fairly accurate view of how viral these kinds of sites can go. Bake in social – the above data shows people love to share remarkable interactive experiences. That reminds me ‘Like this post?’ Share it with friends or bookmark for later, heck go crazy leave a comment. Update: Here’s one we made earlier – a parallax scrolling site for eCommerce products. A twist on Parallax and taking inspiration from Prezi – we recently created this landing page for BodyHack.com using Impress.JS Will of Visconnect created this nifty parallax page – screen adjusted and smart-phone safe.