Parallax scrolling with jQuery

When I first heard about Parallax, I was like what the hack is that?. Then I started googling about what is Parallax effect (I knew it was a JS thing). Okay, Wikipedia came up first.

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.[1][2] The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

What??. Then I googled Parallax effect examples, wow I amazed by the what I saw, those were really eye-popping effects.

Okay, what we are going to do here? Most of the examples I saw are using background images and most of their work is done by changing the background position. But I had a requirement which requires to use div only (divs with embed images) and also div in inside a another wrapper div which has a fixed height and overflow:scroll, that make the solution is more complicated. May be there are some jQuery plugin out there but I wrote a one by myself to make it work for divs (technically for any element).

Here is the complete code, put this in to a jquery.parallax.js file and include it in header. See below to how to use it.

(function ($) {
  // get window size
  var $window = $(window);
  var windowHeight = $window.height();

  // update the size of window when resize
  $window.resize(function () {
    windowHeight = $window.height();
  });

  // define a function
  $.fn.parallax = function (speedFactor, outerHeight) {
    var $this = $(this);
    var getHeight;
    var firstTop;
    var paddingTop = 0;
    //get the starting position of each element to have parallax applied to it 
    $this.each(function () {
      firstTop = $this.offset().top;
    });

    if (outerHeight) {
      getHeight = function (jqo) {
        return jqo.outerHeight(true);
      };
    } else {
      getHeight = function (jqo) {
        return jqo.height();
      };
    }

    // setup defaults if arguments aren't specified
    if (arguments.length < 1 || speedFactor === null) speedFactor = 0.1;
    if (arguments.length < 2 || outerHeight === null) outerHeight = true;

    // function to be called whenever the window/div is scrolled or resized
    function refresh() {
      var pos = $window.scrollTop();
      // if your using a div wrapped with another div with overlflow:scroll and fixed width
      // comment above line and uncomment below.
      // position top alwats retugn a negative balue
      // var pos = -1 \* ($('#content').position().top - 95); 

      $this.each(function () {
        var $element = $(this);
        var top = $element.offset().top;
        var height = getHeight($element);

        // Check if totally above or totally below viewport
        if (top + height < pos || top > pos + windowHeight) {
          return;
        }
        // $this.css('backgroundPosition', "0px  " + Math.round((firstTop - pos) \* speedFactor) + "px");
        // comment above and uncomment below two lines for background images.
        // you can set any property here to make it more dynamic
        $this.css('margin-top', Math.round((firstTop - pos) \* speedFactor) + "px");
        $this.css('position', "relative");
      });
    }

    $window.bind('scroll', refresh).resize(refresh);
    // if your using a div wrapped with another div with overlflow:scroll and fixed width
    // comment above line and uncomment below.
    // to use this feature you need to add https://github.com/brandonaaron/jquery-mousewheel in to your header.
    // $('#content').bind('mousewheel', refresh).resize(refresh);
    refresh();
  };
})(jQuery);

Dependencies :

jQuery (Tested with jQuery 1.7)

jQuery Mouse Wheel (Only if your using a div wrapped with another div with overflow:scroll and fixed width)

How to use?.

$('YOUR ELEMENT').parallax(3);
// 3 is the transition speed. 1 is default speed so you can set .01 to any height value. Less than 1 will be quite browser intensive.

Note : This will create the CSS effect using padding-top and position relative, but you might need to do a lot of CSS to make it look nice.