2013-02-22 11 views
8

ist dieser Link als Referenz
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
in dieser Site Mitte und Rechts Abschnitt beide zu einem Zeitpunkt verschoben werden, wenn wir Mitte Abschnitt blättern ...
ich es gleiche mit diesem Code fertig bin: -
wie Parallax Scrolling zu implementieren?

diese

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

, aber ich habe ein wenig Problem.
in der oben genannten Website beide auf einmal scrollen, aber die rechte Seite ist langsam Scrollen wie es funktioniert ....?
Bitte helfen Sie mir ...

+0

sein namens Parallax-Scrolling ... – Vloxxity

+0

@Vloxxity großer Dank Mann ... wie sein möglicher irgendeine Idee? –

+0

Ich habe dir gesagt, wie es heißt, so können Sie sich eine Antwort googlen xD – Vloxxity

Antwort

0

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

Bitte nehmen Sie sich einen Blick auf diese Lösung. Obwohl nicht sehr universell, kann es Ihnen einen guten Start geben. Die Geschwindigkeit der rechten div wird automatisch angepasst, wenn Sie ihre Höhe im CSS-Teil der Geige ändern.

Es sollte angemerkt werden, dass 2D-Parallax-bezogene Probleme wie diese Grundkenntnisse in Mathematik erfordern. Beispiel oben verwendet dieses Modell:

  • die Schriftrolle der Seite zu bestimmen, so dass wir wissen, wie viel links div gescrollt wird.
  • Verwenden Sie die Kenntnis der Höhe der Seite, Fensterhöhe und Höhe der linken div zu berechnen relative scroll. Das heißt, der Wert von 0 bis 1 zeigt an, ob die Seite überhaupt nicht gescrollt wurde, um einen bestimmten Betrag gescrollt wurde oder bis zum Ende gescrollt wurde.
  • Karte des relatve scroll die Abmessungen von langsam Schicht bezüglich der Fenstergröße genaue Rolle für langsam Schicht zu bestimmen.
Verwandte Themen