The concept is simple and the results are almost magical.
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.
It’s still a classic example of the parallax scrolling effect.
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.
Ben the Body Guard
An amazing feel.
It’s like you’re walking through a game with only your scroll wheel.
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 have no idea what this site is about.
I just scrolled through it really fast about five times.
Art of Flight
I almost puked. #vertigo
I love the zoom effect.
It’s like you’re diving into the site!
Cool in a number of ways.
I love how it feels like you’re controlling the car at the very beginning. Very engaging!
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.
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?
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!