Scrolling Parallax examples

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.

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.

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):

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:

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.

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.

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.

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 .

Some parts of my code seems to disappear behind background image with this plugin (Eg. h1 title of my webpage or images: http://vivianroldo.fr/SatoornV2)… I don’t know why. Suggestions?

January 7, 2011 at 8:45 am

Andrewsays:

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.

@Andrew Having the same problem! Everything I try just falls flat… any help?

May 6, 2011 at 9:39 am

elfynitysays:

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

luissays:

Yeah, very useful. Is there a way we could change the z-index property?
Thanks Jon!

July 6, 2011 at 1:15 am

Jamessays:

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

Alexsays:

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

Alexsays:

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

johnnosays:

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

johnnosays:

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).

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

Jasonsays:

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

Curtisssays:

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

November 27, 2011 at 2:34 am

Turricansays:

@Andrew:
To center the background image i added an id in the .js in line 185 to the two -parts (for example ) and set the background-position for #parabg in my css.

December 21, 2011 at 6:19 am

Nikitasays:

Hello. Help me.
I have block (div) width:600px height: 275px and body height more 2000 px. This plugin dont work. If I change div height to a larger (700px), plugin work. Why?

January 10, 2012 at 9:52 am

Santiago Morenosays:

@Andrew and all who need background images to be centered. You can position the image as a background inside a Div. In your stylesheet you will need to state:
#div{
background-position: top center;
width:100%;
height: whatever you want;
position:absolute;
top:0;left:0;
}
Now all you need is to call the div with js. It worked for me

I like the plugin a lot but it doesn’t seem to work properly in Google Chrome or IE9. I am using it on jQuery objects. Works fine in Firefox but not in Chrome or IE9. Chrome doesn’t throw any errors but it’s not working either.

I did some debugging and found that Chrome and IE9 return ‘auto’ for $(box).css(‘top’) if it is not specified in css. This makes parseInt($box.css(‘top’)) return NaN rendering startingPos kind of useless.

Maybe this helps when making Scrolling Parallax compatible with newer browsers.

February 25, 2012 at 4:15 pm

Matthewsays:

Hey Jon,

I’m currently working on website utilizing your fantastic plugin, but i’m having trouble implementing scrolling parallax on jquery objects. The only effect that occurs to the ‘div’ is “position:static;” with no movement. I’ve checked my code multiple times and included “position:fixed.” Are their any currently known issues? Anything you can point me to? Thanks!

Hi, I had the same idea! I guess great minds think alike. Your script is way better than my few lines of code.

One problem tho. I really kinda need the background to be centered. It’s a peeve, but I hate the fact that it’s stuck to the left side of the window when you resize it. Any chance you’ll be able to fix this? Would be a nice feature in general:

alignHorizontal: left/center/right
alignVertical: top/middle/bottom

Not sure if it’s possible to make them work together tho..

March 17, 2012 at 9:22 am

fred73says:

Hi John,

I love your plugin and its easy handling.
What I was struggling with, was displaying the backgrpund image without stretching.
Depending on the screen resolution I added these lines . in this example I tested it with 2 different resolutions.

The examples while being viewed using tablet are unsuccessful is this a bug?

June 14, 2012 at 4:08 am

JHsays:

How can you center the images rather than have them stretch?

July 4, 2012 at 12:44 am

Ollisays:

Hi!

Nice plugin, but I have small problem with it. I tried to put all my scrolling objects outside viewport with “bottom: -5px” (the items are max 5px high) but when I add speed to the options, my scrolling items receive a “top” attribute and are positioned wrong.

My problem is, that the background image jumps down a few pics when start scrolling… any ideas?

September 11, 2012 at 10:10 am

Rowansays:

I hope Im not too late to the party. But my question is.. Is it possible to set a final fixed position for your div and have it scroll in to place and stay there allowing it to then scroll out of view as normal along with the rest of the page content.