Paralaks kaydırma nasıl uygulanır?

Question

bu
ben bu kod ile aynı yaptım am ... biz Center bölümünü kaydırma eğer her ikisi de bir anda kaydırılan siteden Merkezi ve Sağ Bölüm referans
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
için link: -

bu html kodu: -

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

Senaryo: -

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

ama tek biraz sorun var. Yukarıdaki sitedeki
, her iki kaydırma da, ancak Sağ tarafta, çalışma nasıl yavaş ilerliyor ....?
Lütfen bana yardım edin ...

Answer 1

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

bu çözümün bir göz atın lütfen. Çok evrensel olmasa da, size iyi bir başlangıç ​​verebilir. Sağın div'un hızı, kemanın CSS kısmındaki yüksekliğini değiştirdiğinizde otomatik olarak ayarlanır. Bu gibi 2D-paralaks ile ilgili problemlerin temel matematik bilgisi gerektirdiği unutulmamalıdır. Yukarıdaki örnek şu modeli kullanır:

• Sayfanın kaydırmasını belirleyin, böylece div'un ne kadar soldan çıktığını biliyoruz. Sayfanın yüksekliği hakkındaki bilgileri, pencere yüksekliği ve yüksekliği hesaplamasını kullanarak göreli kaydırmayı hesaplayın. Yani, sayfanın hiç kaydırılmadığını, bir miktar kaydırıldığını veya sonuna kadar kaydırıldığını gösteren 0 ile 1 arasındaki değer.
• yavaş tabaka için kesin kaydırma belirlemek için pencere boyutunun ilgili yavaş tabakanın boyutlarına relatve kaydırma haritada.

Answer 2

Bu divlardan birinin (js cinsinden) kaydırma davranışının üzerine yazmanız ve onu ör. Diğerinin 0.5'i. burada bir göz atın: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/