The concept is simple and the results are almost magical.
It was first introduced as an animation technique, but became a very popular video game design effect.
Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. (via Wikipedia)
Here’s an example of how it works:
Take three different image layers.
Then, move them at different rates.
The front being the fastest, then the middle, followed by the back which moves the slowest.
It creates a Parallax effect that always reminds me of passing corn rows driving on the back roads of Colorado and Nebraska as a kid.
This same effect has been applied to web design and creates some really awe inspiring web sites:
Nike Better World
This is the first site I had ever seen using this effect.
Very cool.
It’s still a classic example of the parallax scrolling effect.
Smart USA
The timing on this one is really good. Even though there is a sharp color distinction between each car, it’s don in such a way that’s very appealing.
Love it.
Ben the Body Guard
An amazing feel.
It’s like you’re walking through a game with only your scroll wheel.
Laurentius
Although this example didn’t “blow me away,” it was done really well. It wasn’t about the effect, it was about the message.
Very well done.
Mario Kart Wii
Watch your progress at the bottom — Mario Kart style!
They even throw a curve in the road — sweet!
Moods of Norway
I confess.
I have no idea what this site is about.
I just scrolled through it really fast about five times.
True story.
Art of Flight
I almost puked. #vertigo
BeerCamp
I love the zoom effect.
It’s like you’re diving into the site!
Bettle
Cool in a number of ways.
I love how it feels like you’re controlling the car at the very beginning. Very engaging!
New Zealand
There is so much good stuff going on with this one.
From the map to the links, this is another reason why Flash is dead.
Activate Drinks
This was my favorite.
It was a nice mix of sweet effects and actually selling the product.
From the first twist of the bottle, I was hooked.
Which one was your favorite?
Resources
If you’re interested in building your own site with a parallax scrolling effect, here are some helpful resource links from Web Designer Wall:
- Recreate NikeBetterWorld Parallax
- Behind the Scenes of NikeBetterWorld
- Building Parallax Scrolling Storytelling Framework
- Parallax Scrolling jQuery Plugin
- jParallax Plugin
Want to see some more examples? Check these out!
I try to keep up with all the parallax sites, but I hadn’t seen the Activate Drinks site yet. It does an amazing job of conveying the feeling that the content is bubbling up through liquid.
The reason I like to keep in the loop on the parallax trend is because I develop a parallax WordPress theme to help non-developers create a parallax site. You can check it out at http://five3.me
Cool!
Just thought you’d like to know that I saw this post just as we were finalising our website and wanted something just a little different and this fitted the bill perfectly. Today we launched the site to include the parallax scrolling on the home page, gives it that summer feeling! All you in the snow, enjoy!
http://www.bethlehem.org.nz
Very cool. Love those clouds!
nice!
i love the beetle-site and i have to say, i just found the activate drink site today and it’s super hot!
very inspiring..
Just launched my first parallax scrolling site http://www.visconnect.de – screen adjusted and smart-phone safe – with mooTools and contao CMS (german though)
tell me what you think
I like it!
Really nice post! Really interesting webdesign technology!
I would recomment one more site like these: http://www.webseitenfactory.de/
Great, thanks!
It was really helpful.
I’m gathering the information about a parallax scrolling in these days to post about it on my blog.
And It was really easy to understand about it.
Thank you.
I’d like to request you something.
May I use your examples(images of sky, grass,,,) on my blog?
I’ll write down the reference, your address.
Thank you for your useful post.
Go for it!
Thank you!!!
Thank you very very very~~~ much!!!
Here’s my first attempt at a parallax scrolling website: http://www.novamonkey.com – let me know what you think!
Okay, well that’s just plain awesome.
Thanks Eric!