Showcasing the CSS Parallax Effect: 12+1 Creative Usages [Update2]
Posted in Design Articles | Trackback URL | 12 Comments »
Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don’t mean measuring distances between objects in space, the parallax error in photography, any StarTrek episode, the movie Parallax View and definitely not DC Comic’s Parallax monster.
I mean Parallax Scrolling which is a technique often used in good ol’ arcade and video games like Moon Patrol or Sonic the Hedgehog. In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.
Since our operating systems are mainly 2D too we can use this pseudo 3D technique to create the same illusion in our web browsers. Of course this was first done by flash designers and it’s a popular effect used in flash based websites or parts of it.
But with the rise of CSS this technique can now be done without the use of flash as Alex Walker and Paul Annett discovered. You see we are now very close to the Atari with Web-Design.
So it’s time for a first showcase of websites using this effect. At the end of this article you’ll find some tutorials for making this effect too. And as you can see there’s a parallax effect in the header of this website too so I will not include myself in this showcase list 
So here are the examples. Just start clicking, resizing and goggling!
Examples
Clearleft’s Silverback Teaser page
The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too:
An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a tutorial out of it:
Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one:
Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like “whoooot!” now. You can read here how he made it.
We all hate Quickbooks, Do You?
Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word “quickbooks” in it:
More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves:
Another funky name and a nice parallax too. This one uses little dinosaurs. Something like “Oh, so cute” or “How adorable!” should come to your mind:
A russian site with an awesome making-webdesign-in-jungle parallax (thanks egot!). They even have different parallax headers on every page. Just click through the top menu:
More Scripts and Interaction, please
All the showcased sites above need to be resized in the browser to see the effect. This fact makes those effects nice easter eggs but they are rather useless for most users. But with some JavaScript we can bypass this limitation.
Parallax Backgrounds - a multi–layered javascript experiment
Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window:
Fly + Parallax Scrolling Effect
Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it’s done with Flash:
Whatever this site is about (Help me dutch speaking folks! edit: anna knows it!) it creates a shaky effect controlled by your mouse pointer:
CSS combined with Scriptaculous’s Morph effect
Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks:
Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery:
How-Tos and Tutorials
- How to recreate Silverback’s Parallax Effect
- In the Lab: Doing strange things to CSS Backgrounds
- Starry Night: Incredible 3D Background Effect with Parallax
- Your own CSS parallax illusion 3d image
- Parallax Backgrounds - a multi–layered javascript experiment
- How to Make the Parallax Effect
Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article.
Update 05/29/2008: Dylan Bathurst wrote an article How to make the Parallax effect which includes his own “Keep out of the Rain” example and a sticky, Hulk style Parallax footer:
And he has found another Parallax effect on the website of the Rissington Podcast. Cool!
Update 2 06/02/2008: Nice commentators routine and Jorge Epuñan made some more interactive Parallax examples:
A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load
My personal favorite for now in terms of usability. If you are able to understand spanish, read his explanation.
Tags: CSS, Design, Parallax, Parallax Scrolling, Showcase, WebDesign
Discuss (12) |
Digg This! |
Save to Del.icio.us |
Stumble It! |
Float This!
May 23rd, 2008 at 11:57 am
Nice roundup!
Got you stumbled + featured on my website. Keep on writing these great articles.
Greetings,,,
May 23rd, 2008 at 1:41 pm
The Dutch site with the shaking tree, is about a new campaign of the Dutch non-commercial foundation called SIRE.
SIRE campaigns on urgent issues in society that do not get enough attention. The work done for SIRE by advertising agencies, web agencies and other companies is donated and voluntary. The same goes for air time, ad space and other facilities.
For instance, they brought violence on children to the attention, and the site with the shaking tree is about fostercare.
May 23rd, 2008 at 1:55 pm
@Marco: thanks for stumbling and featuring
@anna: thanks for the info! International readership rocks!
May 24th, 2008 at 9:08 am
Also, see the banner at: http://www.cdev.ru/?proceed
Outstanding creation !
May 24th, 2008 at 9:26 am
thanks for the link egot! have included the site in the showcase.
May 26th, 2008 at 6:13 pm
hi everybody,
i’ve done something similar on this website:
http://www.sonus-game.com
it caused performance problems on some computers, so i’ve added a enable/disable panel on startup which saves a cookie.
May 29th, 2008 at 7:05 pm
Hey kremalicious, thanks for the link love, and great examples. I’m looking forward to reading more of your articles.
June 2nd, 2008 at 4:55 pm
I’ve applyed Parallax with Mootools to get some ‘real’ use (more than just moving the window)…
You can check it working here.
And the explanation (in spanish).
cheers.
June 2nd, 2008 at 6:35 pm
@routine: nice one! but 90% CPU usage on a Core2Duo Machine just for browsing a website… have added you to my article.
@Jorge Epuñan: Nice one, too! Congratulations for such a great example in terms of usability. have updated my article with your parallax and a link to it, too.
@Dylan Bathurst: Thank you
June 3rd, 2008 at 10:43 pm
thank you.
i know. it was just an experiment.
90% are too much.
but i do not know how to make it do a better performance.
any suggestions?
June 7th, 2008 at 3:03 am
Hi Matthias,
As promised, I’m posting the link the Eden Sessions site we did.
Eden Sessions
This uses Javascript to do a Parallax effect, based on the mouse position.
It’s a specific javascript function .. as apposed to something that uses a framework, but it does still chew up the memory a bit on older machines.
However, it’s nowhere near the 90%.
In a future version, we’ll add a link in the accessibility bar which says “turn off effects” for people with older computers.
All in all though, I think it works very well .. and the background with the transparent boxes and small amount of movement works well.
Incidentally, the crowd and stage picture isn’t something we came up with artificially for the website. It’s something Eden have used in all their press advertising as well, in the national press, NME etc .. so I think it’s a justified use of Parallax on a commercial site .. not just something that’s done for the sake of being cool. (though it is very cool).
We’re pretty chuffed with the Eden Sessions site and I think it’s the first time I’ve seen something like this on a commercial site .. rather than as an experiment or on a blog.
I’d be interested to know other people’s thoughts.
- Rich
August 8th, 2008 at 9:04 am
oh! very nice blog site. Keep blogging.