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 š
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
You rock man!
hThis is nice jquery plugin, just one question; Have you tested scrolling Parallax with Firefox browser?
check the header over here:http://www.thebeatlesrockband.com/cinematic.php
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
Good news! The stuttering issues in Firefox seem to be greatly improved with the release of FF 3.5
Yes! Cool plugin, once again! keep up the great work.
Cool!
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!
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?
This is what my site needed !!! thanks!
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 :-).
I believe i will use it someday.
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.
It appears that this sort of code, like Dom called out, isnāt something I can implement using a div tag. Is that true?
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?
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.
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!
@Andrew Having the same problem! Everything I try just falls flatā¦ any help?
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.
Yeah, very useful. Is there a way we could change the z-index property?
Thanks Jon!
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?
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!
Nevermind, I was able to get it! Added z-index to an id, tagged to an img. So excited! Thanks a lot!
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.
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?
Iām looking to make an element move horizontally when the user scrolls vertically. Anyone extend this plugin to allow this?
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.
<a href="http://www.funsies.com" rel="nofollow">Funsies website</a>@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.
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?
@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
Sorry, I forgot to write:
#div{
background:url(your image address) no-repeat;
}
Thanks for the great plugin Jon!
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ā¦
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!
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.
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 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
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..
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
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?
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?
script was missing:
$(function() {
$.scrollingParallax(āimg/background-parallax.jpgā, {
bgWidth : ā200%ā,
enableHorizontal : true
});
});
The examples while being viewed using tablet are unsuccessful is this a bug?
How can you center the images rather than have them stretch?
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?
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.
Delicious plugin, big thanks Jon! Works absolutely fine.