content marketing agency

Acquisition Engine

A Boutique Digital Marketing Agency

Beyond the Infographic: 12 Parallax Scrolling Sites that Inform, Engage and Entertain

Posted on 07 Nov 2011 in Content Development | 5 comments

Written by:

Co-Founder & Digital Strategist at Acquisition Engine. Nomadic Soul. Sagan Fanboy. Follow @seanmccolgan !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

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.

Atlantis World Fair What is Parallax Scrolling?

/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.

  • The Parallax effect in web design is achieved using 3 core technologies: HTML5, CSS3 and JQuery.
  • Parallax scrolling is now officially becoming part of the HTML5 spec via the <parallaxScroll> tag.
  • Dave Cranwell created a nifty jQuery scroll parallax plugin you can download from Github.

Let’s look at 12 examples of parallax scrolling sites that are engaging and entertaining:

12. Atlantis World Fair

Atlantis World Fair

 

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/

11. The Volkswagen-Beetle

21st Century Beetle

 

 

 

 

 

 

 

 

 

 

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/

10. Elect LO nica

Elect-LO-nica
 

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/

9. New Zealand

New Zealand Home Page

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

8. Galaxy Nexus

Galaxy Nexus

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/

7. Nizo App

Nizo App landing page

“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

6. BeerCamp

BeerCamp

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.

  • CSS 3D transforms: Sections are arranged one behind another in 3D space.
  • CSS 2D transform: Sections are arranged one inside another, using scale transform.
  • Normal site: Sections are arranged vertically, like a normal site. For lesser browsers.

You can download the websites source on Github and learn more about the build process here. Tweets: 11,076 Facebook likes: 3000 External backlinks: 3,926 http://2011.beercamp.com

5. Hobo Lobo

Hobo lobo parallax scrolling landing page

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

4. RapidBoot Lenova

RapidBoot Lenova

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/

3. The Guide to the App Galaxy

Guide to the App Galaxy

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

2. Ben the BodyGuard

Ben the BodyGuard

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/

1. Nike Better World

Nike Better World

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

Game On

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.

  • Cliffton

    I feel like I was just shown the light for the future of infographics! Much appreciated!

  • Will Sky

    Just launched my first parallax scrolling site http://www.visconnect.de – screen adjusted and smart-phone safe ;)

  • http://www.acquisitionengine.com Sean McColgan

    Looks awesome Will :)

  • Geoff

    This is great!

    We just
    launched our new website and it features a cool parallax effect! Check it
    out! :)

    http://www.reigngames.com/

  • Bart

    Check out this excellent example 
    http://sixtyseven.com/clients/nebu It has animations in the parallax scroll as well. 

More in Content Development