Scrolling Parallax: A jQuery Plugin

Translate

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

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.

Follow him on Twitter
Buy him a beer

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.

28 Comments to “Scrolling Parallax: A jQuery Plugin” RSS 2.0

June 2, 2009 at 11:29 am

Martin says:

You rock man!
June 2, 2009 at 10:41 pm

The Sudoku Times says:

hThis is nice jquery plugin, just one question; Have you tested scrolling Parallax with Firefox browser?
June 4, 2009 at 9:17 am

Thomas says:

check the header over here:www.thebeatlesrockband.com/cinematic.php
June 5, 2009 at 1:52 pm

Jon Raasch says:

Hey Thomas,

I believe that was made with jParallax, check it out: webdev.stephband.info/parallax.html

Sudoku times,

The issues you’re experiencing in Firefox may be one of two things. The first is that Firefox’s scrollwheel implementation jumps down the page in fairly large increments. Any jitteriness from this is unavoidable, but try using the scrollbars on the side to see if it’s smooth.

Other than that, as I mentioned in the ‘known issues’ section, this plugin is a bit resource heavy and can run slow on older computers when scrolling quickly or using multiple parallaxes at once. I believe the plugin is fairly optimized for performance, for instance I’ve predefined all the objects and variables that I can and it’s pretty object oriented with no extraneous methods used.

Hope it isn’t a dealbreaker for you,
jr
July 1, 2009 at 11:18 am

Jon Raasch says:

Good news! The stuttering issues in Firefox seem to be greatly improved with the release of FF 3.5
July 10, 2009 at 11:13 pm

scupper says:

Yes! Cool plugin, once again! keep up the great work.
August 17, 2009 at 1:34 pm

Fredde says:

Cool!
September 8, 2009 at 7:25 am

Alchemyst says:

Awesome plugin,any chance it will work with the jquery scrollTo function? I have a page with links which scroll to certain points in the page smoothly using the scrollTo plugin. I would love to be able to add a paralax effect to it as-well. The page scrolls horizontally by the way.

Thanks!
September 16, 2009 at 9:42 pm

Jon Raasch says:

Hi Alchemyst, I think it should just work with the scrollTo function, have you made sure to enable horizontal scrolling in the Scrolling Parallax options?
December 30, 2009 at 10:16 pm

philip says:

This is what my site needed !!! thanks!
December 31, 2009 at 2:22 pm

Philip Dahl says:

I love the plugin but it isn’t working for google chrome, which is so odd. Let me know if you’re also having this issue (I’m aware that Chrome is in beta but a lot of my associates are using it and I wondered if you had made a fix. Thank you for your time and your plugin .
April 28, 2010 at 8:02 am

cooljaz124 says:

I believe i will use it someday.
July 21, 2010 at 7:55 am

Dom says:

Is there a way to have the same effect with a div instead of an image in all browsers? When i use a div, it works in firefox but doesn’t in any other browser.
October 7, 2010 at 4:13 pm

Patrick says:

It appears that this sort of code, like Dom called out, isn’t something I can implement using a div tag. Is that true?
October 30, 2010 at 4:14 pm

Vivian says:

Some parts of my code seems to disappear behind background image with this plugin (Eg. h1 title of my webpage or images: vivianroldo.fr/SatoornV2)... I don’t know why. Suggestions?
January 7, 2011 at 8:45 am

Andrew says:

Love it! I am having one problem though; centering the images.
I have an image in its original size, not repeating – and I want it centered. I’ve tried putting it in a CSS div, but I think I’m doing something wrong.

Can anyone help? Thanks!
Andrew.
January 14, 2011 at 3:28 pm

Andy says:

I’m trying to make a quick demo page to pitch how cool this would be to use for a project, but I’ve run into a big issue using it in combination with a jQuery anchor slider.

www.sm2studios.com/parallax/

When you click on anchor link 1 or 2, everything moves smoothly, but if you click on 3 where the div has to move quickly it gets hung-up at the top of the page.

Do you know if there is any way to fix this or is it a known issue? I really appreciate the help!
March 20, 2011 at 1:30 pm

Bennett Feely says:

@Andrew Having the same problem! Everything I try just falls flat… any help?
May 6, 2011 at 9:39 am

elfynity says:

I have hunted far and wide across the internet for another vertical parallax tut, and have not really found one. Everyone else who commented understands what you are talking about here: I don’t get “then call the scrolling parallax with the path to your image”, and i don’t understand where i am supposed to put the piece of code in that follows it. I download the .js file, and though maybe it should go in there … hmmm? Any clarity on the above would be appreciated.
June 13, 2011 at 9:09 pm

luis says:

Yeah, very useful. Is there a way we could change the z-index property?
Thanks Jon!
July 6, 2011 at 1:15 am

James says:

Is there anyway to position the the image for example, giving it a top and left of 200px? If not, is there an easy to stop the div version from being fixed position?
July 12, 2011 at 11:14 am

Alex says:

I’m pretty new with this stuff so I’ll apologize first hand for my ignorance.. but I’m wondering whether it’s possible to add z-index to the images in the “Multiple, layered parallaxes for a nice depth effect” example; I’d like to add some text content in between layers. Thank you!
July 12, 2011 at 12:40 pm

Alex says:

Nevermind, I was able to get it! Added z-index to an id, tagged to an img. So excited! Thanks a lot!
July 23, 2011 at 7:41 am

johnno says:

Is it possible to set the Z-index of the image when it’s being used as the ‘background’ to a page? It works ok and appears as the background in screen view, but when you go to print the page it plonks itself on top of the content obscuring all from sight.
July 23, 2011 at 7:55 am

johnno says:

Sorry for pre-emptive posting – I fixed it:

I got right of the bit of js that makes it display block, and I made the js give the image a class name.

Then in my normal bit of my stylesheet I just told that to give the block style to the class name, and in the print part of my stylesheet to tell it to not display (although I guess I could have just told this to push its Z down).
August 25, 2011 at 1:21 pm

mattkoyak says:

Anyone successfully used this to animate an image on a horizontal axis while the user scrolls on the vertical, essentially making images enter from the sides and move across the screen as the page itself scrolls down?
September 7, 2011 at 7:42 am

Jason says:

I’m looking to make an element move horizontally when the user scrolls vertically. Anyone extend this plugin to allow this?
October 21, 2011 at 11:10 am

Curtiss says:

Hey Jon,
Just wanted to say thanks for an amazing plugin. Very easy to use and can be used to create some awesome looking websites. We just got finished adding a vertical parallax to our website, thought you might enjoy seeing it. Funsies website

9 Trackbacks/Pingbacks to “Scrolling Parallax: A jQuery Plugin”

Scrolling Parallax: A jQuery Plugin | Jon Raasch’s Blog | Squico
jQuery Parallax Effect | Robin van Wijngaarden
A Hot New Trend in Web Design: Parallax Scrolling + Examples | The Blog of Janna Hagan - Web Designer & Developer
Lost World’s Fairs | Trent Walton
jQuery Parallax – Tutorial e Show Case | Fedeweb

Related searches:
parallax scrolling plugin jquery animation

gipoco.com is neither affiliated with the authors of this page or responsible
for its contents. This is a safe-cache copy of the original web site.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax examples

About Scrolling Parallax

Scrolling Parallax for background images

Scrolling Parallax on jQuery objects

Animation options for Scrolling Parallax

Layout options for Scrolling Parallax

Known bugs, issues, etc.

You Might Also Like:

28 Comments to “Scrolling Parallax: A jQuery Plugin” RSS 2.0

9 Trackbacks/Pingbacks to “Scrolling Parallax: A jQuery Plugin”