The parallax effect with jQuery

Explanation

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.

HTML & 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; }

<!-- html -->
<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.

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?