Scrolling Parallax: A jQuery Plugin

scrolling parallax example

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



Jon Raasch

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




You Might Also Like:


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

  1. Martin says:

    You rock man!

  2. hThis is nice jquery plugin, just one question; Have you tested scrolling Parallax with Firefox browser?

  3. Thomas says:

    check the header over here:http://www.thebeatlesrockband.com/cinematic.php

  4. Jon Raasch says:

    Hey Thomas,

    I believe that was made with jParallax, check it out: http://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

  5. Jon Raasch says:

    Good news! The stuttering issues in Firefox seem to be greatly improved with the release of FF 3.5

  6. scupper says:

    Yes! Cool plugin, once again! keep up the great work.

  7. Fredde says:

    Cool!

  8. 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!

  9. 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?

  10. philip says:

    This is what my site needed !!! thanks!

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

  12. cooljaz124 says:

    I believe i will use it someday.

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

  14. 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?

  15. Vivian says:

    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?

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

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

    http://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!

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

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

  20. luis says:

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

  21. 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?

  22. 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!

  23. Alex says:

    Nevermind, I was able to get it! Added z-index to an id, tagged to an img. So excited! Thanks a lot!

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

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

  26. 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?

  27. Jason says:

    I’m looking to make an element move horizontally when the user scrolls vertically. Anyone extend this plugin to allow this?

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

  29. Turrican says:

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

  30. Nikita says:

    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?

  31. Santiago Moreno says:

    @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

  32. Santiago Moreno says:

    Sorry, I forgot to write:
    #div{
    background:url(your image address) no-repeat;
    }

  33. Seanbelly says:

    Thanks for the great plugin Jon!

  34. william malo says:

    you have got to be joking! a query plugin for parallax scrolling????
    you can literally do that with one line of javascript!!!
    simplicity man to the rescue! :

    window.onscroll=function(){document.body.style.backgroundPosition=”0 “+(-(window.pageYOffset/2))+”px”;}

    note:
    (you need to have this in the css: “background-attachment: fixed;”)
    the number “2″ can be switched with anything, the larger the number, the slower the background will scroll…

  35. Robbert says:

    Hi Jon,

    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 am using jQuery 1.7

    If you have any suggestions it would help a lot!

  36. Robbert says:

    Hi Jon,

    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.

  37. Matthew says:

    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!

  38. Alexandra says:

    Hi Jon, thank you for this great plugIn! I just found it and I’m sure I am going to use it quite often, thank you very much

  39. Marcel says:

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

  40. fred73 says:

    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.

    var hoehe = ‘$(window).height()*4;
    // S: 1366×768
    // F: 1440×900
    var ratio = screen.width/screen.height;
    if (ratio > 1.7786458333) hoehe =’500%’;

    bgHeight : hoehe

    So maybe someone out there can code it better, to cover all ratios and screen resolutions.

    cheers
    Fred

  41. juliane says:

    hello, how can i put the image inside a container? i wanted to position it relative to that container. not the whole body.

    can anyone help, please?

  42. Michelangelo says:

    I think this scrolling parallax should be more explained. Not everyone is programer that knows that this:

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

    should be inserted in html code of the page as this:

    $(function() {

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

    why is there not example code for insertion into html.

    I can’t get to work.

    nor there isn’t example on how to call some CSS class if it’s not in the div?

  43. Michelangelo says:

    script was missing:

    $(function() {

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

    });

  44. reece says:

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

  45. JH says:

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

  46. Olli says:

    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.

  47. Silver says:

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

  48. Rowan says:

    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.

  49. Arne says:

    Delicious plugin, big thanks Jon! Works absolutely fine.



Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text