Parallax Scrolling

Parallax Scrolling beschreibt einen Effekt, der dem User beim Durchscrollen einer Website einen Tiefeneindruck suggeriert. Die Elemente einer Seite sind dabei auf verschiedenen Ebenen verankert, die sich beim Scrollen in unterschiedlichem Tempo bewegen.
Damit entsteht ein Effekt, ähnlich dem Effekt der Bewegungsparallaxe, den wir zum Beispiel vom Bahn fahren her kennen: Nahe Objekte ziehen viel schneller am Fenster vorbei als Objekte die weiter in Richtung Horizont liegen.

In der traditionellen Animation wird der Effekt schon seit den 1940ern genutzt. Und auch in der digitalen Welt ist er von klassischen Jump’n’Run Spielen wie Super Mario her bekannt. Der Spieler läuft von links nach rechts, die Berge und Wolken am Horizont bewegen sich viel langsamer als die Büsche und Hügel im Vordergrund.

(gif from abetteruserexperience.com)

Weil die neuen Webstandards HTML5 und CSS3 das Ganze erheblich erleichtern, findet Parallax Scrolling auch immer öfter Anwendung im Webdesign.
Als Auslöser des Trends im Web sehen viele die Nike Seite von 2011. Nike war der erste Big Player, der diese Technik nutzte und zog damit viel Aufmerksamkeit auf sich:

Vor allem in Bezug auf das Storytelling – einer Disziplin, der in der Kommunikation und im Marketing in den letzten Jahren immer mehr Bedeutung zugemessen wird – ist Parallax Scrolling besonders interessant. Schließlich eignet es sich ausgezeichnet, um auf einer Website eine Geschichte zu erzählen. Die Nutzung ist interaktiv, intuitiv und macht Spaß. Der User hat selbst die Kontrolle über die Geschwindigkeit – ein Vorteil gegenüber Videos. Inhalte und Storys können mir Parallaxe Scrolling interaktiv erlebbar gemacht werden. Der User wandert durch die Story. Verschiedenste Inhalte – Produktpräsentationen, Unternehmensporträts, Fachthemen usw. – können so spannend und mitreißend aufbereitet werden.

Ein oft zitiertes Beispiel ist etwa die Seite “Dangers of Fracking”, auf der der User die Reise eines Tropfens steuert und dabei über die Gefahren des “Fracking” aufgeklärt wird:

Dass man Parallax Scrolling nicht nur dazu verwenden muss, um von oben nach unten oder von links nach rechts zu steuern, zeigt diese Seite über 007′s Autos recht gut:

http://www.evanshalshaw.com/bondcars/

Parallax Scrolling kann also sehr viel Spaß machen und dazu genutzt werden, die Dinge einmal anders zu präsentieren.

Trotzdem sollte man sich gut überlegen, ob der Einsatz von Parallax Scrolling auf der eigenen Seite Sinn macht. Denn zum einen stellt sich die Frage, ob es zum Image passt, und ob es sich für die Inhalte, die man gerne präsentieren will, überhaupt eignet. Schließlich soll der Inhalt nicht unter dem Effekt leiden.
Zum anderen gibt es auch ein paar Nachteile. Der komplette Inhalt einer Seite ist innerhalb eines großen HTML-Files niedergeschrieben. Das heißt, dass die Seite sehr groß ist und eine dementsprechend lange Ladezeit braucht. Und auch für die Suchmaschinenoptimierung bringt das einige Herausforderungen mit sich. Durch einige geschickte Kniffe lassen sich aber auch diese in den Griff bekommen.

THIRD MAN arbeitet übrigens gerade an einem spannenden Parallax Scrolling Projekt – stay tuned!