Showcasing the CSS Parallax Effect: 12+1 Creative Usages
Been so in love with the parallax effect that I have to post another article about it. 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.
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.
So here are the examples. Just start clicking, resizing and goggling!
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.
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
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:
Whatever this site is about (Help me dutch speaking folks! edit: anna knows it!) it creates a shaky effect controlled by your mouse pointer:
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
- 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.
And he has found another Parallax effect on the website of the Rissington Podcast. Cool!
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.