Parallax Scrolling Effect with css and jquery, because i love simplicity.

“There is no greatness where there is not simplicity" - Lev Tolstoy

I made this Parallax Scrolling Effect for my blog in a few minutes, just with css and jquery.

Parallax scrolling is a technique, where, as you scroll, the background sections translate slower than the content in the foreground, creating the illusion of 3D depth.

This is my content div:

<div class='content' data-speed='1' data-type='background' style="background:url('http://para.png') 0 0 repeat-y; position:relative;">
</div>

I am using the a div with the attributes data-type & data-speed, which were introduced in HTML5. Since all I need to do is control the speed of the background images, I use data-type="background" and data-speed="1" as key attributes to specify the necessary parameters. For my post I use data-speed="10"

And this is the jQuery:

$(document).ready(function(){
$window = $(window);
    $('div[data-type="background"]').each(function(){
        var $bgr = $(this);
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgr.data('speed'));
            var coord = '0%'+ yPos + 'px';
          $bgr.css({backgroundPosition:coord});
        });
    });
});