Scrolling Parallax: A jQuery Plugin

Scrolling Parallax examples

Simple scrolling parallax effect

Multiple, layered parallaxes for a nice depth effect

Parallax in all directions: vertical and horizontal scrolling

Parallax called on a piece of inline HTML markup

About Scrolling Parallax

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.

Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.

The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the background to name a few. Addtionally you can attach the parallax to any piece of markup, as well as pass an image path as described above.

Download the Scrolling Parallax Plugin for jQuery

Scrolling Parallax for background images

Using the parallax for a background image is incredibly easy. Simply include the javascript files for jQuery and the plugin, then call the scrolling parallax with the path to your image:

$.scrollingParallax('img/background-parallax.jpg');

This will append the image to the page, and stretch its dimensions as described above. If you want to control some of the options, these can be passed as an object in the second argument:

$.scrollingParallax('img/background-parallax.jpg', {
    bgWidth : '200%',
    enableHorizontal : true
});

This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling.

Download the Scrolling Parallax Plugin for jQuery

Scrolling Parallax on jQuery objects

In addition to appending background images, the Scrolling Parallax plugin can be applied to any piece of markup through a jQuery selector:

$('div.parallax-div').scrollingParallax();

This will attach the Scrolling Parallax to any divs with the class 'parallax-div'. For best results assign these divs a CSS position of fixed since that is what the plugin uses.

Now to change the parallax options, simply pass any arguments as the first variable:

$('div.parallax-div').scrollingParallax({
    staticSpeed : 3,
    loopIt : true
});

Here we've passed two arguments to the parallax. The first changes the parallax speed to three times the scrolling speed and the second causes the parallax to loop when it scrolls too far. This will create a fast moving, looping animation when the user scrolls.

Download the Scrolling Parallax Plugin for jQuery

Animation options for Scrolling Parallax

While the Scrolling Parallax plugin for jQuery works nicely out of the box, there are also a wide variety of options. All these options are set by passing an object to the plugin:

$.scrollingParallax('img/parallax-image.jpg', {
    options here
});

A lot of the options are related to the scroll speed. Although the plugin determines an automatic scroll speed by default, you can set it to a static speed using:

staticSpeed : .2

This moves at a rate of .2 times the scroll speed, or a fifth of the rate. Conversely if you want the parallax to scroll faster than the page, just set this above 1.

One advantage of not setting the static speed is that the plugin automatically determines a speed that wont let the parallax go past its boundaries. However when using staticSpeed, you are provided with a number of options.

By default, staticSpeed creates a parallax that stops and anchors the object when it scrolls too far. However, you can remove this and let the object scroll off by setting staticScrollLimit to false. Additionally you can set the parallax animation to loop back to the beginning.

loopIt : true

In addition to the staticSpeed options, there are a few other animation options. reverseDirection works on both static and automatic parallax speeds, and causes the animation to move in the opposite direction (duh):

reverseDirection : true

Finally you can decide whether the parallax supports horizontal scrolling. By default this is set to false for performance purposes, but that can be changed:

enableHorizontal : true

When supporting horizontal scrolling, you can set all the same options as with vertical scrolling, however you have to append an 'X' at the end of each (for the x-axis):

enableHorizontal : true,
staticSpeedX : .5

See a full list of options in the Scrolling Parallax Documentation.

Download the Scrolling Parallax Plugin for jQuery

Layout options for Scrolling Parallax

In addition to its many animation options, the Scrolling Parallax Plugin allows easy control over a variety of layout options. However all of these options concern only parallaxes that use the image path method, since the on-page styling is respected when using the parallax on an existing piece of HTML markup.

By default the Scrolling Parallax appends images with a height of 150% the window size and a width of 100%. If horizontal scrolling is enabled, the image width is boosted to 150%. However any of these can easily be changed by setting the options.

bgWidth : '250%',
bgHeight : '50%'

If you don't want to use a stretched image for your background, Scrolling Parallax also allows you to tile the image in its native dimensions. Simply set bgRepeat to true:

bgWidth : '250%',
bgHeight : '50%',
bgRepeat : true

See a full list of options in the Scrolling Parallax Documentation.

Download the Scrolling Parallax Plugin for jQuery

Known bugs, issues, etc.

While the majority of bugs have been ironed out, there are still some unresolved issues with the Scrolling Parallax Plugin.

One main issue is that the plugin does not work properly in IE6. IE6 was supported before a number of features were added, so an IE6 solution shouldn't be far off. However even then the IE6 solution will probably be rather choppy. The parallax effect is just too much for IE6's tiny brain .

Occasionally performance issues can come up in other browsers as well. Although the scrolling parallax operation has been performance tuned, some choppiness can occur when scrolling quickly on older computers.

Additionally, some browser/OS implementations of mouse wheel scrolling can cause the parallax to jump a bit. This is unavoidable in browsers that treat the mouse wheel scroll as a single large jump rather than a series of small jumps. The plugin uses animation to soften the jump, however it has to be done quickly so the scrolling animation doesn't lag behind the page.

Finally there is an unresolved issue regarding the looping of animation. Instead of a smooth loop using tiled images, the loop jumps from the end back to the top. Fortunately I have a fix in mind that will also make it easy to provide an option to tile the background image at any stretched dimensions.

Download the Scrolling Parallax Plugin for jQuery anyway

• Bookmark
• Vote Up
• Retweet
• Share

---

---

Tags: animation, downloads, front-end, javascript, jQuery, open source, parallax, performance, plugins, web design, webdev

This entry was posted on Tuesday, June 2nd, 2009 at 9:55 am in the category webdev.

---

You Might Also Like:

• QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
• TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike
• QuickFlip jQuery Plugin
• Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin
• Flipbook Movies with jQuery
• 10 Javascript Performance Boosting Tips from Nicholas Zakas
• 10 Advanced jQuery Performance Tuning Tips from Paul Irish

---