In this roundup, we have some fantastic examples of the parallax scrolling effect for you. The parallax scrolling effect, now a firm design trend, is a technique that uses multiple background images that move at different, yet synchronized, speeds as the user scrolls down (also, less popularly, horizontally) a web page. The overall effect gives the viewer a seamless and intriguing browsing experience that just looks damn good!
At the bottom of the page we have also included a selection of tutorials to help get you started. We have also published a collection of Inspiring Single Page Parallax Scrolling Effect Websites as well.
Parallax Scrolling Effect Inspiration
Q Music Titanic
Grab and Go
Micro-Site for Mario Kart Wii
Nike Better World
Ben the Bodyguard
Egopop Creative Studio
The Beatles Rock Band
I to Sie Ceni
Air Jordan 2012
Micro-site for Mario Kart Wii
Atlantis World’s Fair
Tokyu Agency Recruit 2013
Phase 2 Design Studio
Parallax Scrolling Effect Tutorials
With this tutorial you will learn how to use parallax principles to move different backgrounds as you you slide an image.
In this tutorial, you will learn how to build a parallax scrolling storytelling framework.
This tutorial is very helpful for learning how to create a fluid CSS3 slideshow with the a parallax effect.
With this basic tutorial, you will learn how to create the parallax effect using jQuery.
Here, you will learn how to recreate a web page similar to Nikebetterworld.com by using the original jQuery Parallax script.
Using jQuery, you will learn how to create a horizontally scrolling website with a parallax scrolling background effect reminiscent of old-school 2D platform games such as Sonic the Hedgehog.