JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<figure>
<div class="section" style="background-position: 0px -65px;">
<div class="inner" style="background-position: 0px 114.99999999999999px;">
        <!-- your content here -->
    </div>
</div>
<figcaption>
<span class="heading">Explanation</span>
<p><img src="http://www.franckmaurin.com/wp-content/uploads/2011/01/nike-schema.png" alt="schema" width="220" height="190"></p>
<p>Note that there are visually 3 movements: The window scroll, the first shoes pair and the second one.<br>
Shoes pair movements are independent, each one has a single coefficient for the scrolling movement</p>
</figcaption>
</figure>

CSS

.section {        
    width:540px; height:500px;
    background:url(http://www.franckmaurin.com/wp-content/uploads/2011/01/bg_freext.jpg) no-repeat #000; }
.section .inner {
    width:540px; height:500px;
    background:url(http://www.franckmaurin.com/wp-content/uploads/2011/01/fg_freext.png) no-repeat;
}

JavaScript

// 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 });