jak wdrożyć przewijanie paralaksy?

Question

to ogniwo Dla porównania
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
w tym miejscu centrum i prawej części oba są przewijane w czasie, jeśli mamy przejść sekcję Centrum ...
jestem zrobić to samo z tym kodem: -

to kod html: -

<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; } 

ale mam jedno trochę problem.
w powyższej witrynie przewija się w czasie, ale po prawej stronie przewija się powoli, jak działa ...?
Proszę mi pomóc ...

Answer 1

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

Proszę spojrzeć na to rozwiązanie. Choć niezbyt uniwersalny, może dać ci przyjemny początek. Prędkość w prawo div jest regulowana automatycznie, gdy zmieniasz jej wysokość w części CSS skrzypiec.

Należy zauważyć, że problemy związane z paralaksą 2D, takie jak ta, wymagają znajomości podstawowej matematyki. Próbka powyżej korzysta z tego modelu:

• Określa przewijanie strony, dzięki czemu wiemy, ile zostało przesuniętych div.
• Wykorzystanie wiedzy o wysokości strony, wysokości i wysokości okna po lewej stronie div do obliczenia względnego przewijania . Oznacza to, że wartość od 0 do 1 pokazuje nam, czy strona nie przewija się w ogóle, przewija się o jakąś ilość, lub przewija do końca.
• mapie zwój relatve do wymiarów powolnego warstwy względem wielkości okna, aby określić dokładną zwój dla powolnego warstwy.

Answer 2

Musisz zastąpić przewijanie jednego z tych elementów div (w js) i ustawić na nim np. 0,5 drugiego. Spójrz tutaj: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/