Awesome The Parallax Scrolling Effect: 40 Examples and Tutorials

In this round up, we have some fantastic examples and uses of the parallax 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 bootom of the page we have also included a selection of tutorials to help get yopu started.

Q Music Titanic

Iutopi

Cultural Solutions

Farmhouse Fare

Cheese Please

Smokey Bones

Grab and Go

Micro-Site for Mario Kart Wii

Putzengel

Nike Better World

OK Studios

Ben the Bodyguard

Egopop Creative Studio

The Beatles Rock Band

XHTML Slicing

Sullivan NYC

I to Sie Ceni

Air Jordan 2012

Micro-site for Mario Kart Wii

Unfold

Dentsu Network

ResIm

Jan Ploch

Kry-Ptis

Anna Safroncik

Unfinished Business

Volkswagen-Beetle

Appmiral

Atlantis World’s Fair

Johan Reinhold

Beautiful Explorer

Bagigia

Activate Drinks

Tokyu Agency Recruit 2013

Von Dutch

Playtend

Phase 2 Design Studio

Friendly Gents

TokioLab

Krystalrae

No leath

Parallax Scrolling Effect Tutorials

Parallax Slider with jQuery

With this tutorial you will learn how to use parallax principles to move different backgrounds as you you slide an image.

Building a Parallax Scrolling Storytelling Framework

In this tutorial, you will learn how to build a parallax scrolling storytelling framework.

Fluid CSS3 Slideshow with Parallax Effect

This tutorial is very helpful for learning how to create a fluid CSS3 slideshow with the a parallax effect.

Easy Parallax with jQuery

With this basic tutorial, you will learn how to create the parallax effect using jQuery.

Nike Better World Parallax Tutorial

Here, you will learn how to recreate a web page similar to Nikebetterworld.com by using the original jQuery Parallax script.

Build a Parallax Scrolling Website Interface with jQuery and CSS

Create a Funky Parallax Background Effect Using jQuery

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.