how to implement parallax scrolling?

this is link For reference
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
in this site Center and Right Section both are scrolled at a time if we scroll Center section...
i am done it same with this code:-

this is html code:-

<div id="left" class="linked">
<img height="600" src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div>
<div id="right" class="linked">
<img  src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div><br>

Script:-

$(function(){

    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    })

})

css:-

<br>#left { width: 300px; height: 400px; overflow: scroll; float: left; }
#right { width: 300px; height: 400px; overflow: scroll; float: left; }

but i have one little bit problem.
in above site both scroll at a time but the Right side is Scrolling slow how its work....?
Please help me...

Solution

http://jsfiddle.net/cuVC7/0/

Please take a look at this solution. Though not very universal, it can give you a nice start. The speed of the right div is adjusted automatically as you change its height in CSS part of the fiddle.

It should be noted that 2D-parallax-related problems like this one require knowledge of basic math. Sample above uses this model:

Determine the scroll of the page, so we know how much left div is scrolled.
Use knowledge of height of the page, window height and height of the left div to calculate relative scroll. That is, the value from 0 to 1 showing us whether the page is not scrolled at all, scrolled by some amount, or scroll to the end.
Map the relatve scroll to the dimensions of slow layer with respect of window size to determine exact scroll for slow layer.