come implementare lo scrolling di parallasse?

Question

Ciò è un collegamento Per riferimento
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
in questo sito Center e sezione di destra entrambi vengono fatti scorrere in un momento, se scorriamo sezione Centro ...
mi sono fatto è lo stesso con questo codice: -

questo è codice 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; } 

ma ho un piccolo problema po '.
nel sito di cui sopra sia scorrere alla volta, ma il lato destro è lo scorrimento lento come il suo lavoro ....?
Please help me ...

Answer 1

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

prega di dare un'occhiata a questa soluzione. Sebbene non sia molto universale, può darti un buon inizio. La velocità della destra div viene regolata automaticamente quando si modifica la sua altezza nella parte CSS del violino.

Si noti che i problemi relativi alla parallasse 2D come questo richiedono la conoscenza della matematica di base. Esempio sopra utilizza questo modello:

• Determinare lo scorrimento della pagina, in modo da sapere quanto è rimasto aperto lo div.
• Utilizzare la conoscenza dell'altezza della pagina, altezza della finestra e altezza della sinistra div per calcolare lo scroll relativo . Vale a dire, il valore da 0 a 1 che ci mostra se la pagina non è affatto scrollata, scorsa di una certa quantità o scorrere fino alla fine.
• mappa rotolo relatve alle dimensioni lenta strato rispetto della dimensione della finestra per determinare scorrimento esatta per lenta strato.

Answer 2

È necessario sovrascrivere il comportamento di scorrimento di uno di questi div (in js) e impostarlo su es. 0,5 dell'altro. Date un'occhiata qui: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/