How to implement parallax scrolling?

Question

This is the link for reference.
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
in this section, the Center and the right section scroll simultaneously, if we scroll the center section ...
I am doing this with this code: -

this is the 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 small problem.
on the above site simultaneously scroll, but the right side scrolls slowly, how does it work ...?
Please help me...

Answer 1

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

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

It should be noted that problems associated with 2D parallax, such as this one, require knowledge of basic mathematics. The example above uses this model:

• Define page scrolling so that we know how many divs are scrolled.
• Use the page height, window height, and left div height to calculate relative scrolling. That is, a value from 0 to 1 shows us whether the page is scrolling at all, scrolling by some amount, or scrolling to the end.
• Match the relatve link to the dimensions of the slow layer relative to the size of the window to determine the exact scroll for the slow layer.

Answer 2

You have to overwrite the scroll behavior of one of these divs (in js) and set it, for example. 0.5 other. Have a look here: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/