jQuery Parallax Scrolling Tutorial

Here I will show all that’s needed to achieve jQuery parallax scrolling using 3 image layers (this can easily be expanded to more layers) and a few lines of code. You can see the full DEMO or DOWNLOAD the files.

I have 3 images: One solid background image and 2 transparent PNG’s to layer on top of the background at perceived differing closeness to the screen. To achieve the parallax scrolling effect, the background image should have the slowest speed, and the “closer” layers should move progressively faster. It’s just like when you are looking out the window of a car; The hill on the horizon moves by much slower than that burning warehouse in the middle distance and trees on the side of the road fly by much quicker.

The logic is offensively simple. For every X pixels you scroll the window, with jQuery, you move the “nearest” layer 0.8 x X pixels, the middle layer at 0.5 x X pixels and the “furthest” layer 0.2 x X pixels. Of course, you can easily adjust these values to achieve different effects.

Here’s the HTML:

<div class="bgWrapper"></div>
<div class="shark"></div>
<div class="fish"></div>
<div class="mainWrapper"><!-- --></div>

The CSS:

.bgWrapper{
	position:fixed;
	background:url(underwater-bg.jpg) top center no-repeat; 
	height:100%; 
	width:100%; 
	top:0; 
	left:0;
}
.shark{
	position:fixed;
	background:url(shark.png);
	width:250px; 
	height:187px; 
	left:50%; 
	margin-left:-600px;
	margin-top:400px;
}
.fish{
	position:fixed;
	background:url(fish.png);
	width:300px;
	height:246px;
	left:50%;
	margin-left:400px;
	margin-top:500px;
}

..And the jQuery

$(document).ready(function(){
	$(window).bind('scroll',function(e){
   		parallaxScroll();
   	});
 
   	function parallaxScroll(){
   		var scrolledY = $(window).scrollTop();
		$('.bgWrapper').css('background-position','center -'+((scrolledY*0.2))+'px');
		$('.shark').css('top','-'+((scrolledY*0.5))+'px');
		$('.fish').css('top','-'+((scrolledY*0.8))+'px');
   	}
 
});

Want to hear me talk? I co-host the web development podcast “Three Devs and a Maybe”. Check us out here

Did you like this post? Why not subscribe?

33 thoughts on “jQuery Parallax Scrolling Tutorial

    • No Problem.

      I’m not sure I follow the question. There is no “animation” going on in this tutorial per se. We are just moving the position of the various elements in relation to the scroll to achieve the parallax effect. Were you maybe referring to the sprite animation tutorial?

      Let me know if you need some more help.

    • You can yes, you just need to adjust the css(‘left’) or css(‘margin-left’) in the parallaxScroll() function rather than the ‘top’ property.
      Cheers!

  1. Great tutorial! Thank you..
    maybe you can help me achieve this one? Im a noob in jquery, really. Anyway, I am doing parallax on elements (not background) . say there’a cube with its square parts (for each side) not connected with each other and are all on the ground. and when you scroll the window the parts will move and form a cube.
    i want to know how can I stop the moving of the elements when you’re on that certain section.

    Hope you could help me. Thank you.

  2. Hi,

    That should be fairly straightforward. All you’d need to do is adjust the top/bottom and left/right positions of the various cube elements based on the position of the scroll so it would be something like.

    $(window).bind(‘scroll’,function(e){
    parallaxScroll();
    });

    function parallaxScroll(){
    if (!//statement to check if the elements are in the desired position){
    var scrolledY = $(window).scrollTop();
    $(‘#cubeFace1′).css({‘top’:'-’+((scrolledY*0.5))+’px’, ‘left’:'-’+((scrolledY*0.7))+’px’});
    $(‘#cubeFace2′).css({‘top’:'-’+((scrolledY*0.4))+’px’, ‘left’:'-’+((scrolledY*0.6))+’px’});
    }
    }

    Let me know how you get on!

    Cheers
    Fraser

  3. hi fraser. thanks for ya post on parallax scrolling. iam searching for a simple tutorial for paralax more than a week. now i found it nice tutorial. helped me alot thanks again

    • Glad it was of use. You should be able to simply set the initial position of the fish to the top in the CSS and then change this line:

      $(‘.fish’).css(‘top’,'-’+((scrolledY*0.8))+’px’);

      to

      $(‘.fish’).css(‘top’,((scrolledY*0.8))+’px’);

      Let me know how you get on!

      Cheers!

  4. Thanks for getting back to me!

    So I tried this:

    $(‘.survey-para-heading’).css(‘top’,((scrolledY*0.8))+’px’);

    I have had no luck! But I have to say your simplistic code has really helped a lot! It’s taking a lot of time trying to execute what I am after! But this is a great start! Thank you again!
    Sanj

  5. Hi Fraser, I wonder if you can help? If I set a background image position to “bottom”, it jumps to the top when you start scrolling. Is it possible to have the position of a background image set to bottom and still work with the parallax effect?

    • Hi Lee. It’s definitely possible, yes. This is happening because it’s setting the background top position based on the scroll. You’ll just need to work out the current height of the window and subtract the height of your image and add this to the new scroll position in $(‘.bgWrapper’).css(‘background-position’,'center -’+((scrolledY*0.2))+’px’); Cheers

  6. Fraser,

    Thank you for making something so easy to follow! How would I adjust this to have different ‘pages’ (ie: move to another section with a different background, images, text, etc.)?

    Also, can you move vertically, and then move horizontally? Is that even possible, or do you have to be consistent?

    Thank so much!

  7. Very easy tutorial (I am finding it difficult to get it to work) I get three images spaces in three corners (roughly) and no scrolling effect. What should I do ?

  8. I was able to implement the parallax scroll easily enough, however once in place, it nullified the background color I had designated for the navigation background. Thoughts?

  9. Hey Fraser,
    Awesome tutorial.One thing I noticed, there is a vertical jump in position of about 10-20px from the original position of the shark and fish when you start to scroll. Any way for this not to occur? It occurs on non-background elements, such as a div or img position. I’m on PC and happens in FF, Chrome and IE. Thanks!

  10. Awesome explanation :)
    Is there any way we can add some fluid momentum scrolling on the whole page so the result feels smoother?
    Something like this… http://hotdot.pro/en/
    The scrolling is simply amazing on this website and so does the parallax movement…!
    I hate the default scrolling behavior of browsers…grrrrr.

    Thanks a lot.

  11. Hi, and thanks for an easy and understandable tutorial.

    As I’m rather new to jQuery, I’m wondering if there is a simle way of stoping the parallax effect when you reach the bottom of the background image?

    Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>