How to implement parallax scrolling with jQuery

A parallax effect is adds a nice touch of style to an existing website, and looks fantastic with large images. Here is how to implement a parallax on a background image with jQuery.

First, set the element’s background to fixed:

.myElement{background:url('images/myBackground.jpg') no-repeat fixed center top}

Next, put this in your $(document).ready() function. Do not forget to change the .myElement selector to something relevant.

var parallaxItem = $('.myElement');
$(window).scroll(function () {
    //Position in the page
    scrollPos = $(this).scrollTop();

    //Scroll the image's background at half the speed of the rest of the page
    //Change -0.5 to any other value depending on the desired effect
    parallaxItem.css({
        'background-position': "center " + (scrollPos * -0.5) + "px",
    });
});

Depending on the value of the modifier on the last line (currently -0.5), you can have the background scroll faster, not at all, or in the opposite direction.

It’s that simple! If you have any questions, do not hesitate to ask them in the comments section. If you want to learn jQuery properly, I highly recommend Mark Myers’ “A Smarter Way to Learn jQuery“. Mark Myers tends to write very high quality programming books with a focus on good practices.

3 comments on “How to implement parallax scrolling with jQuery

Leave a Reply

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax