Veranschaulichung des Parallax Scrolling Effekts (Quelle: Wikipedia)

Der Parallax Scrolling Effekt bedient sich einer optischen Täuschung, wobei durch das unterschiedlich schnelle Bewegen von Vordergrund und Hintergrund die Illusion von Dreidimensionalität geschaffen wird.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

- Parallax scrolling (Wikipedia)

Dieser Effekt wird in der Medientechnik schon seit vielen Jahren verwendet, durchaus bekannte Beispiele hierfür sind zweidimensionale Computerspiele (siehe Super Mario, etc.).

Die Anwendung dieses Effekts für Webseiten ist eher neu, da der notwendige Fortschritt der Rechenkapazität und Browserkompatibilität erst in den letzten 1-2 Jahren eingetreten ist. Ein durchaus beeindruckendes Beispiel der Anwendung dieses Effekts bietet Nike mit der Darstellung ihrer Air Jordan Produktserie. Dieses Beispiel ist eines, das die heutigen Möglichkeiten der Multimedialität in Browsern ausreizt, vorallem wenn man bedenkt, dass hierbei völlig auf den Einsatz von Flash verzichtet wird.

Für meine Webseite werde ich den Effekt natürlicherweise etwas weniger effektvoll einsetzen. Ich orientiere mich an einem online verfügbaren Tutorial, das unter http://richardshepherd.com/smashing/parallax/ zu finden ist.

Technisch realisiert wird der Effekt durch den Einsatz von JavaScript, das die Berechnung der Positionierung der Elemente übernimmt. Auch berechnet und verändert wird die Positionierung der Hintergrundgrafiken der Sections. Mit dem Parameter/Attribut data-speed="..." wird für eine Section bestimmt um welchen Faktor sich der Hintergrund schneller bewegen soll als er Vordergrund, was eben durch das Verändern der Positionierung der Hintergrundgrafik erreicht wird.