26th May 2011

jQuery scroll parallax plugin

Examples

London School of Hygiene and Tropical Medicine

Nuffield Trust

Generic horizontal example

Generic vertical example

Details

Parallax, for those not in the know, "is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight" (wikipedia). You'll perhaps know it better as "that sideways pan effect animators use where the distance moves slowly but layers of scenary nearer the 'camera' move quicker".

It's become a popular effect on websites, notably http://silverbackapp.com/ (try resizing your browser horizontally) which pushed the effect to the fore due to the notoriety of the agency behind it (ClearLeft). Silverback was released several years ago but more recently Nike created http://nikebetterworld.com which also uses the effect rather nicely.

I've had cause to use it at work, so I wrote a jQuery plugin to make it easier.

Its important to note that in the Nike example which this plugin tries to recreate (and my own examples below), much of the effect is not in fact controlled by javascript. The slow movement of the background image is actually because without the JS it is completely stationary in the centre of the browser window, thanks to background-position:fixed. What the javascript does it to move the background image very slowly, like it isn't fixed at all.

Download the plugin from github

How to use it

  1. Create several elements in your HTML page which you want to apply the parallax effect to. Set the background-image of each element. The scrollParallax plugin currently only works on background images. In the example index.html in github I've created a unordered list in which each list item is one of the parallax elements. Each background image needs to be quite large - the full width/height of browser for example - for the effect to work best.
  2. Parallax looks nicest when there are several items all moving at different speeds. I'd recommend you therefore add some children within the elements you created in step 1, each with their own background images which we'll set to move at a different speed.
  3. Apply the example styles.css to the elements you've created. The important attributes are the position, overflow and background-position ones (although you'll note I've applied the background-position:fixed by using the background shortcut). The 100% width and height are also vital for the child elements. With the styles in place you'll already be able to see the masking effect working as you scroll through.
  4. Include the jQuery (1.4.3+ required) and jQuery.scrollParallax.js javascript files in your HTML. You'll also need the jquery.inview.js plugin.
  5. Apply the scrollParallax function to each element you want to move, using the standard jQuery selector method, illustrated in the scripts.js file on github

Options

The plugin has just 3 options:

Option Default Description
speed 0.2 Any positive or negative value. This is the speed with which the background will move. Positive values move the background image with the direction of scrolling. Negative moves the image against the scroll. Negative values look the best.
axis 'x,y' 'x'/'y'/'x,y'. Which axis are parallax-enabled. By default both axes are enabled, but for whatever reasons you may wish to lock it to one.
debug false true/false. Whether to enable debugging to the console. Useful only if you care about the numbers, which you most probably don't.

Tags:

Comments

heath waller

Sat, 2011-06-18 20:24

Thanks so much for making these for the jquery-challenged amongst us. I'm going to take a crack at animating some designs with parallax and no doubt these plugins will be of great help! Really appreciate your effort :)

Mat

Tue, 2011-07-05 10:04

Thank you

It's just work

Nick

Mon, 2011-07-11 11:52

Good work Dave! One question when I am looking at the vertical demo some of the images jerk as I scroll how can this be fixed?

Dave

Mon, 2011-07-11 12:01

The jerkiness is really a combination of a) using images which are inappropriate and b) the browser itself.

The parallax effect in general looks best if large images are moving slowly in the background, but my example has some small images set to move quite quickly in the foreground which was mainly for a proof of concept but in practice isn't the best way to implement parallax.

Jerkiness is present in all parallax examples around the net, where the images are large, but as the images tend to move very little the jerkiness isn't so noticeable.

Having tested the vertical example in Chrome, Firefox and IE, Firefox is really the only one which has difficulties. FF4 in particular seems to have taken a considerable backwards step from FF3 in terms of javascript speed, which is causing the jerkiness. Chrome and IE are nice and fluid.

The trick is to use large images, move them only slightly and ensure your foreground content (the true "content" of the page) is sufficiently eye-catching that the eye isn't drawn to the background jerkiness too much.

Nick

Mon, 2011-07-11 12:54

Thanks for the quick reply Dave. I have only tested in Chrome but was referring to a jump in the background position (looks to be about 30-50px) when certain large and small images appear on the screen. Maybe something to do with the Inview plugin?

Michael

Fri, 2011-08-12 18:30

I have the same issue and can't pinpoint the cause. As soon as you scroll, the background shifts 50px to the right and the inner elements jump left. Otherwise, great plugin.

Shawn

Tue, 2011-07-19 12:46

Hello Dave, I really enjoy the entire tutorial you have laid out but am encountering one issue I was hoping you might be able to help me with. Rather than having the X axis be set to the absolute positioning using "px" in the jquery.scrollParallax.min.js I am trying to use "%" so that the elements adjust based on browser width. When I do this it works across all browsers except IE8 and IE7. In those instances I encounter a JS error in the console that says "css(...) is a null value. The issue only arises when I change the X values to "%" from "px" in that js file. Any suggestions for how to get around this? It seems to work everywhere else, just not in the world of Microsoft. Thanks!

marko

Thu, 2011-07-28 21:57

Thank you soooo much! this is what I was searching for... but only a question.
This code works good on iPad?
Thank you

Mark

mattkoyak

Fri, 2011-08-26 16:17

Anyone have an example using Dave's code with an object moving left-right while the user and the background image scrolls down? what would I need to change to make one of my list items with a background image do this - enter stage left and cross the page, back or forth, while my visitor scrolls up or down?

mattkoyak

Fri, 2011-08-26 16:18

I know it's been done, I'd just like to know if I can do it with Dave's code.

Otis

Tue, 2011-08-30 20:03

You'll probably just have to change some Y's into X's.. I don't know. I'm the biggest beginner in any coding walking this planet.

Davor

Fri, 2011-09-02 07:08

Thanks for the great plugin Dave.
Has anyone add easing to scroll? Is it possible?

Nick

Mon, 2011-09-05 16:06

Hi Dave,

Is there way to use this plugin when the body overflow is set to hidden?

Many thanks

Simon

Wed, 2011-10-05 12:30

I have tried using this plugin and it works great on Firefox and Chrome. I don't appear to be getting the same effect from IE9 though. The pages scroll vertically but there are no opposite scroll effects on any of the other smaller images.

Also tried compatability mode in IE, no louck either. Also tried on several other machines, various versions of IE and the plugin does not appear to work correctly on any of them. Any suggestions as I would like the top 3 browsers supported at least.

Kind Regards,
Simon

Dave

Wed, 2011-10-05 12:39

Hi Simon,

The 2 examples above work in IE7 and 8, however didn't work in IE9 due to IE9's overly sensitive nature about mime-types matching the content being served. The examples loaded the "inview" jquery plugin directly from the github CDN but the mime types don't seem to match and IE9 throws the error "jquery.inview.min.js was blocked due to mime type mismatch". As a result none of the javascript is executed. I've now updated the examples to use a local version of the inview plugin. If you downloaded inview yourself and used that, rather than pulling it directly from github, that should solve those problems. If it doesn't theres a good chance the IE developer console will give you other pointers as to what is going wrong.

Simon

Wed, 2011-10-05 12:53

You are indeed correct sir, I missed that!

It works like a dream, and the machine I tested it on with IE8 did come up with some errors (which I ignored), should have told me.

Thanks Dave for a great (and time saving) product.

Best Regards,
Simon

Simon

Wed, 2011-10-05 12:58

Thanks Dave, that sorted it. What a great little product, easy to use and works on all major browsers, well done!

Kind Regards,
Simon

Dave Y

Fri, 2011-10-07 17:34

Thank you for sharing this awesome plugin. I have run into some issues however, mainly in trying to have the backgrounds aligned to center horizontally.

I did see a note on gitub with a suggestion without success:

line30 changed to:
$this.css({'backgroundPosition': "50%" + parseInt(newYPos) +"px"});

if i set the background like this:
background: url(../_pix/bg1.jpg) 50% 0 fixed no-repeat;

it shows up on load in the center, but as soon as i start to scroll, it jumps to the left and stars scrolling from there, ignoring the centering.

any ideas on how to work this out would be much appreciated, thanks!

Nikhil

Tue, 2011-10-18 11:21

Can we put navigation dots in order to slide horizontally to next slide.
Also when we scroll manually the dots should get selected / deselected as per which slide the use is? How do we go about this?

There are may parallax example, but none of them show horizontal scrolling with navigation dots, mousewheel

Dave

Tue, 2011-10-18 11:35

What you're asking about is really a separate thing altogether. My plugin produces the parallax effect - one element moving over another as if in perspective - but what you're after is navigation. Navigation may not be relevant in many parallax implementations so I deliberately left it out of the plugin. I have no plans to add navigation to the plugin at present as this can be fairly easily added by coding it yourself.

Eric

Tue, 2011-10-18 18:07

Dave, I'm having a big issue, i want my site aligned center and my child items in a 960px wide container. when i give the child bg element the center property, it moves to the left on scroll. When I put it in a container, it still wants to be on the left and out of my centered container. Is there any way around this or should I have to design a left aligned site?

Eric

Tue, 2011-10-18 18:08

Also, i'd like to note that i really appreciate the work you've put into this. I don't mean to sound short in my query, this plugin is fantastic.

Dave

Tue, 2011-10-18 19:59

The plugin currently creates the parallax effect by altering the "background-position" property. As calculations can only be performed on numbers, the plugin doesn't currently support string-based positions like "center", "top" etc. This is also why percentage values are currently not supported as absolute x/y coordinates are far easier to perform calculations on than percentages as percentages are relative values.

I'm afraid you're going to have to use numerical coordinates with my plugin for now.

TDP Workspace

Fri, 2011-11-04 21:12

Pretty awesome! I really enjoy learning about this.
Again: thanks for share it mate!

Ivan

Wed, 2011-11-16 15:34

Hey Dave, thank you for sharing this plugin. I just got one issue: the script load after the first scroll and jumps to the background positions written inline and not in the extern css. Can I load the script right after the loading of the page? Without this "jump"?

Thank you!

Marco

Tue, 2011-11-22 03:46

Bravo, super, génial, simple, efficace, rapide, grandiose, de la balle

merci pour ton travail

Jake

Tue, 2011-11-22 21:25

Quick question...
I am working on implementing this. Right now I just have the effect applied to some background divs. The divs are fixed attachment and the position is center 0px. I have the axis locked to y only.

When the page loads, everything looks great. The backgrounds are centered perfectly as they should be. However, when I begin to scroll the x-position of the background jumps to 50px suddenly, and the parallax effect works on the y-axis (as it should).

Is this because I am using the constant "center" for horizontal? Is it assuming I mean 50%?

Thanks for your input.

Jake

Tue, 2011-11-22 21:50

Answered my own question.

For those interested, the plugin updates x and y of background position every time, even if locked to one axis. It grabs the 50% (i.e. center) and pushes it back out as 50px.

Code:
$this.css({'backgroundPosition': parseInt(newXPos) + "px " + parseInt(newYPos) +"px"});

I just adjusted this CSS update to change the first value to % instead of px and it fixed the issue.

Ivan

Wed, 2011-11-23 08:17

Hey Jake, I got exactly the same problem. My backgrounds are positioned in px and without any attachment.

I dont really got your solution. Where did I have to paste the script?

Thank you.

Stefan

Thu, 2011-12-29 18:28

Hey Ivan,
the line that was mentioned above is 131 in the script. Also had the same problems... hope i can i fix now!
Greets

Stefan

Thu, 2011-12-29 19:07

Changed the code from line 103 up to 133 like this:

//find current position so parallax can be relative to it
var currentPosArray=$this.css("backgroundPosition").split(" ");
var currentYPos=parseInt(currentPosArray[1].replace(/[^0-9\-]/g, ""));

//recalculate position on scroll
$(window).bind('scroll', function(){
if($this.hasClass("inview")){
var offset = $this.offset();

//calculate new position
if(settings.axis.match(/x/)){
var currentXPos=parseInt(currentPosArray[0].replace(/[^0-9\-]/g, ""));
var Xpos = offset.left - $(window).scrollLeft();
var newXPos = parseInt((-(Xpos) * settings.speed) + currentXPos) + "px";
}else{
//var newXPos = currentXPos;
var newXPos = currentPosArray[0];
}
if(settings.axis.match(/y/)){
var Ypos = offset.top - $(window).scrollTop();
var newYPos = (-(Ypos) * settings.speed) + currentYPos;
}else{
var newYPos = currentYPos;
}

debug("new X position: "+ newXPos);
debug("new Y position: "+ newYPos);

$this.css({'backgroundPosition': newXPos + " " + parseInt(newYPos) +"px"});
}
});

Fermin

Wed, 2011-11-23 23:02

Como dijo Jake, para centrar horizontalmente se debe corregir los css y el js de scrollParallax. Los códigos son:

CSS:

background: url("http://lorempixum.com/1024/768/city/1") fixed no-repeat 0px 0px white;

JS:
$this.css({'backgroundPosition': parseInt(newXPos) + "% " + parseInt(newYPos) +"px"});

PD: Si yo leo en inglés, ustedes en español :P

Fermin

Wed, 2011-11-23 23:03

CSS:

background: url("http://lorempixum.com/1024/768/city/1") fixed no-repeat center 0px white;

Chris

Tue, 2011-12-13 19:39

Does this plugin move elements based on their parent element? I have implemented this plugin on a horizontal site. When my browser is full screen, everything looks and functions great. When I resize my browser to a smaller window, the elements don't line up correctly when at their 'starting position'. This happens even after reloading the page.

Stefan

Tue, 2011-12-20 14:59

The links to the examples do not work anymore :-(

Allan

Fri, 2012-01-06 19:35

Hi, those links to the examples still do not work.
it will be great if you could adjust this.
Thanks and btw GREAT PLUGIN!

Thuy

Wed, 2012-02-08 21:45

How do I make an image move at a slant like the seagull or the spaceship at the nike site here: http://www.nikebetterworld.com/product

I am by no mean a jquery/javascript person. I need to know this ASAP

Thank you in advance.

ApsyLone

Fri, 2012-02-10 17:49

I met problem using your jQuery plugins.
If you take a look at http://v2.paradox.fr, you'll see between the 'slides', the image make a little 'jump'.

Can you explain me if there's any solution to solve it ?

Thanks and keep up with the great work done :)

Tim

Sat, 2012-02-18 14:21

Hi Dave,
Thanks for this it works really nice. I was curious about two things:
1.) if there's a way to integrate an onload auto start
2.) Is there a way to center with a margin: 0 auto; I tried and didn't seem to be able to get it to work.
Thanks again!

Sam Wilson

Wed, 2012-03-14 14:48

All you people asking him questions like he is your employee should help yourselves. Maybe you'd even learn something in the process.

Joshua

Thu, 2012-03-29 20:04

I don't think we would be asking if we were able to "help" ourselves. And some of us are asking as if he is very informative on the subject. It's not that we think of him as our "employee", rather we see him as the best tutor on the matter at hand.

Daniel

Thu, 2012-03-29 05:28

I still don't understand how to apply this to Tumblr. Oh well. Thanks for the explanation, I think I understand it a little more!

rob

Thu, 2012-03-29 17:40

this is lame!

Greg

Tue, 2012-05-01 10:27

The example links don't appear to be active....could you push the live please?

Ren

Mon, 2012-05-21 09:25

Hi Dave, thanks for this plain, it works great. I have set up a horizontal scroll that combines ScrollTo and LocalScroll and all works perfectly apart from 1 things that I can't work out which would make my site sweet as a nut :D
Is it possible to set up the parallax as 100% height of the browser window, or is this not possible in the same way as centring is not possible?

Brian

Tue, 2012-06-19 14:37

Dave, great plugin and hopefully quick question. I've got a beer mug I'm animating the filling motion on scroll. The plugin works great. I have a condition where I want to pause the parallax even though I'm still scrolling. Looking through your code, I've tried $('element').unbind('scroll.parallax') but that doesn't seem to kill the parallax. I've also tried the lazy way of hitting the condition and then setting a background-position attribute and including !important but that doesn't work either.

I think it's all due to the setTimeout() variable being set and reset. My code doesn't have the scope to alter that. Before I go and work around this in your code, do you have any insight on how to stop the parallax from happening?

Jason Renaud

Tue, 2012-07-10 09:04

I came up with a solution for the height on different browsers.

This is the site: http://imaginalab.com/projects/eg/cms/ and the snippet to adjust the height of the individual items is this:

var height = $(window).height()+20;
$('.item').css('height', height+'px');
$(window).resize(function() {
var height = $(window).height()+20;
$('.item').css('height', height+'px');
});

Maria

Sun, 2012-07-15 16:07

Thank you very much for this plugin Dave, I was wondering if it would be possible to move the inner elements horizontally so they start on the left of the screen and as we scroll they move to the right.
Thank you very much.

q

Mon, 2012-09-17 06:56

Hi It's very nice. Thank you for it. but this script is not working on IE browser.. :-( There are some example that are working on IE browser too.. How did they make it? is there any other script

Troglos

Tue, 2012-10-02 16:53

Nice plugin.
I would like to use some inner elements horizontally too. How can I define it singularly?

Pages

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.