The parallax effects with jQuery

Article

Early this year, we can notice this new Nike website with an amazing scrolling effect. How it works? I’ll try explain that with my little code.

1 Demo

Explanation

schema

Note that there are visually 3 movements: The window scroll, the first shoes pair and the second one.
Shoes pair movements are independent, each one has a single coefficient for the scrolling movement

2HTML & CSS code

/* CSS */
.section {        width:540px; height:500px;
                  background:url(images/bg_freext.jpg) no-repeat #000; }
.section .inner { width:540px; height:500px;
                  background:url(images/fg_freext.png) no-repeat; }


<div class="section">
    <div class="inner">
        <!-- your content here -->
    </div>
</div>

So we need two div with background for the parent, and a transparent foreground for the child.

3 JQuery code

// The plugin code
(function($){
    $.fn.parallax = function(options){
        var $$ = $(this);
        offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var opts = $.extend(defaults, options);
        return this.each(function(){
            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = windowTop * opts.coeff;
                    $$.css({
                        "background-position": "0 "+ newCoord + "px"
                    });
                }
            });
        });
    };
})(jQuery);

// call the plugin
$('.section').parallax({ "coeff":-0.65 });
$('.section .inner').parallax({ "coeff":1.15 });

To run the plugin, we need 3 parameters: the coefficient, when the plugin starts and when the plugin stops. After, we bind a function to the scrolling evenement. This function update the background-position-y by multiplying the value of the scroll by the coefficient.

Easy, right?

If you like (or not) this article, you can write a comment 26 or a tweet 505.

Discussion 26 comments - RSS feed

  1. Pingback: Tweets that mention The parallax effects with jQuery | Franck Maurin -- Topsy.com

  2. Jason Long

    Hey Franck,

    Great writeup on Nike’s parallax effect – the presentation of your post is great as well. I also dug through Nike’s JS when I was working on my site redesign (I have a simpler, but much simpler parallax effect) to see if they did anything to improve performance. Like Stuart mentioned above, scroll events fire *a lot* and I’m interested in Resig’s idea of frequent polling. If the effect is smooth enough, it would free up a lot of cycles in the code.

  3. Lee Salisbury

    Franck:

    Thanks for the note as well. We were just discussing it internally here on how Nike’s site was built. We had tried some prelim comps just to show a rough demo, and this will help. Jason, good call on saving the scroll events. Wondered how you’d do it without it calling a zillion times.

  4. Pingback: Les effets de parallaxe [WebTrends] | ikomeo Design

  5. Sam

    Hi,
    Great description there!
    Is this all the code you need? I’m presuming there is a couple of pages of js that’s missing or is that really it?
    I’m very new to jquery so forgive me if this is a silly question…

    Thanks,
    Sam

  6. Pingback: GRPH Biblioteca de Recursos » Blog Archive » The Parallax Effect

  7. Pingback: Parallax Tutorials. Roundup from DesignFloat | DesignFloat Blog

  8. Pingback: Webstandards-Magazin Nr. 11 | Tobias Scheible

  9. Rafael Cavalcante

    Sean Dooley and Schriebmann.

    As i can see, we just need to call the plugin for using with another objects, like this:

    $(‘.section’).parallax({ “coeff”:-0.65 });
    $(‘.section .inner’).parallax({ “coeff”:1.15 });
    $(‘.section .anotherObject’).parallax({ “coeff”:1.65 });
    $(‘.section .justAnotherClass’).parallax({ “coeff”:2.15 });

    Good luck with that ;)

  10. Alex

    Really great work! Thank you man.
    As we need it in the x direction i extended your plugin code with the option “direction”.
    So you’re able to use it in any direction you want.

    The plugin code is as follows:

    /**
    *
    */
    // The plugin code
    (function($){
    $.fn.parallax = function(options) {
    var $$ = $(this);
    offset = $$.offset();
    var defaults = {
    “start”: 0,
    “stop”: offset.top + $$.height(),
    “coeff”: 0.95,
    “direction” : “y”
    };
    var opts = $.extend(defaults, options);
    return this.each(function(){
    $(window).bind(‘scroll’, function() {
    windowTop = $(window).scrollTop();
    if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
    newCoord = windowTop * opts.coeff;
    switch (opts.direction) {
    case "y" :
    $$.css({
    "background-position": "0 "+ newCoord + "px"
    });
    break;
    case "x" :
    $$.css({
    "background-position": newCoord + "px 0"
    });
    break;
    }
    }
    });
    });
    };
    })(jQuery);

    and calling is:

    $(function() {
    //call the plugin
    $(".section").parallax({ "coeff":-0.65 });
    $(".section .inner").parallax({ "coeff":1.15, "direction" : "x" });
    $(".section .inner2").parallax({ "coeff":-1.15, "direction" : "x" });
    });

    Maybe anyone need this also.

  11. Pingback: 20 Mind-Boggling Parallax Website Design And How To Make One

  12. Pingback: 20 Mind-Boggling Parallax Website Design And How To Make One | Graphic Design

  13. Pingback: 20 Mind-Boggling Parallax Website Design And How To Make One | Free Web Design Tucson

  14. Pingback: Downgraf – Design weblog for designers » Examples of Parallax Effect in Web Design & Tutorials

  15. Pingback: jQuery Parallax - XHTMLforum

  16. Pingback: 20 Mind-Boggling Parallax Website Design And How To Make One | HowDoDesign

  17. Pingback: Controlling window movement by mouse | PHP Developer Resource

  18. Pingback: The parallax effects with jQuery | Belkina’s Weblog

  19. Pingback: Parallax Web Design Concept – a trending concept | Inventrium

  20. Pingback: Un site entre illusion et langage web | Com@Visée...

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>