Parallax scrolling has been used in computer games for years – it is the effect where the background remains static and the foreground scrolls vertically or horizontally, or vice versa – the foreground remains static and the background moves. This scrolling method is being seen as the new trend in website design. Here we have collected some of the best jQuery parallax scrolling plugins & tutorial.

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.

3D Parallax jQuery Plugin with Editor

The jQuery 3D Parallax Plugin magically animates your objects in a dynamic created 3D world. For those of you who don’t know what Parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer, the most front objects also transform themselves to the viewer’s point of view.

jParallax

jParallax has had a major overhaul in readiness to be released as version 1.0! Layers are now freezable – the last feature I wanted to implement – and the code is more j and compact. I’ve been really encouraged by all the great comments, so thank you everyone! I just need you to road test the demos and tell me that it’s still working in your browser, and then I’ll stick a 1.0 on it.

jQuery scroll parallax plugin

Parallax, for those not in the know, “is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight”. You’ll perhaps know it better as “that sideways pan effect animators use where the distance moves slowly but layers of scenary nearer the ‘camera’ move quicker”.

Nikebetterworld Parallax Effect Demo

In this tutorial, we’re going to take the original jQuery Parallax script and recreate a webpage similar to Nikebetterworld.

Parallax Slider with jQuery

We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

Building a parallax scrolling storytelling framework

Stevan Živadinović, the brains behind multi-plane side-scroller web comic Hobo Lobo of Hamelin, walks us through the development of the Parallaxer platform and gives a crash course on turning pencil drawings into transparent-background assets

Create a Funky Parallax Background Effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

jQuery Parallax Tutorial – Animated Header Background

In this tutorial we’ll learn how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.