2010-11-20 9 views
3

Ich fand diese Website mit einem Effekt, den ich gerne replizieren würde. Um zu sehen, was ich rede hier zu gehen:So scrollen Ebenen mit mehreren Rate auf der Website

http://www.rowtothepole.com/

Wenn durch die Webseite scrollen Sie, dass der Eisberg Schicht blättert mit einer anderen Geschwindigkeit als das Textfeld oben auf sie sehen können. Ich würde gerne wissen, wie sie das machen.

+0

Ziemlich cool effect..but ein etwas ablenkend. – sje397

+0

Ich denke im Prinzip würde so etwas als störend empfunden werden, aber in diesem Beispiel kann ich nicht sagen, dass ich zustimme. Die Trennung des Inhalts auf diese Weise ergibt eine größere Hierarchie in den Daten. Ein Benutzer wird sofort wissen, dass die Webseitenebene durch diese weißen Linien verankert ist, der Hintergrund sind die Wolken und Eisberge. Es war kein Affekt, der um Aufmerksamkeit der Benutzer bat. Ich verstehe jedoch, dass ich als Faustregel nichts dergleichen aussprechen würde. Es ist ein Usability-Trade-off, das es verdient, erkundet zu werden. – basikthings

Antwort

2

In ihrer http://www.rowtothepole.com/release/includes/js/parallax.js

dort Code sind die körpereigenen Hintergrundbild und einem äußeren div Hintergrund des Bildes zu verschieben, die für die Eisberge und die Wolken sind:

Event.observe(window, "scroll", function() { 
    var offset = document.viewport.getScrollOffsets(); 

    $(document.body).setStyle({ 
     'backgroundPosition': 'center -' + (offset[1]/px_scroll_amt) + 'px' 
    }); 

    if (xhr_support) { 
     $("outer").setStyle({ 
      'backgroundPosition': 'center -' + (offset[1]/(px_scroll_amt/3)) + 'px' 
     }); 
    } 
}); 
+0

Danke, dass Sie das für mich gefunden haben. Ich schätze es. – basikthings

Verwandte Themen