The parallax effect with jQuery

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.

Wed Mar 23 2011


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 -->

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

jQuery code

// The plugin code
  $.fn.parallax = function(options){
    var $$ = $(this);
    offset = $$.offset();
    var defaults = {
      'start': 0,
      'stop': + $$.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;
              'background-position': '0 '+ newCoord + 'px'

// 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?