how to implement parallax scrolling?

Question

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

i told you how it is called so you could google yourself an answer xD — Vloxxity, Feb 22 '13 at 10:36
Also see http://stackoverflow.com/questions/13078800/parallax-sidebar-scrolling/15168139#15168139 — Matt Borja, Mar 01 '13 at 22:53

score 0 · Answer 1 · answered Feb 22 '13 at 10:39

0

You have to overwrite the scrolling behaviour of one of those divs (in js), and set it to e.g. 0.5 of the other one. Take a look here: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

answered Feb 22 '13 at 10:39

Vloxxity

980
1
9
30

Fyodor · Accepted Answer · 2013-02-23T10:24:33.947

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.

how to implement parallax scrolling?

2 Answers2