5 Beispiele für Parallax Scrolling – der Webdesign-Tipp
Kommentare

Was sich bereits letztes Jahr abgezeichnet hat, wird uns 2013 noch öfters über den Weg laufen. Die Rede ist von Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt. Der dabei entstehende 3D-Effekt verleiht der Seite Tiefe und lädt den Besucher der Seite zum Verweilen ein.

Wie unterschiedlich Parallax Scrolling umgesetzt werden kann, zeigen unsere fünf Beispiele:

Spokes Pedi Cabs, bietet in Oak Cliff Texas einen Fahrrad-Rikscha-Dienst an. Wer auf die Homepage des Unternehmens geht, kann dank Scroll Patterns eine Fahrradrikscha durch eine Comic-Stadt navigieren.

Je schneller man scrollt, desto schneller zieht die Landschaft am Gefährt vorbei. Wer genau hinsieht, erkennt kleine Details, wie z.B. Vögel, die umher fliegen. Die bunte Navigationsleiste bewegt sich mit und bleibt immer am oberen Rand, sodass man darüber schnell zur gewünschten Information kommt. 

parallax

Quelle: Spokes Pedi Cabs

Auf Gatwick Express Tracks kann der Besucher die Bahnfahrt von der Victoria Station zum Flughafen durch Scrollen erkunden. Die virtuelle Strecke ist wie bei einer Infografik mit Videos und Zusatzinformationen gespickt. Zusätzlich fliegen über dem fahrenden Zug animierte Flugzeuge und Vogelschwärme hinweg.

parallax

Quelle: Gatwick Express Tracks

Ein Turnschuh löst sich auf und baut sich wie von Zauberhand wieder zusammen: Nike zeigt auf nike.com, dass man auch mit dem unscheinbarsten Thema mittels HTML5 und einer knorke Idee hervorragende User Experiences schaffen kann.

css

Quelle: nike.com

 

Der Webdesigner Russ hat zwei Leidenschaften in einer Webseite miteinander verbunden: Seine Freundin Jess und CSS3 . Das Ergebnis ist eine schöne Webseite namens jessandruss.us. Der Besucher der digitalen Liebeserklärung kann die Liebesgeschichte zwischen Jess und Russ anhand animierter Frames nachvollziehen. Durch stetiges Scrollen erlebt der Besucher die Ups und Downs der Beziehung und gelangt so schließlich an das vorläufige Happy End – der Hochzeit.

html5

Quelle: jessandruss.us

Die Seite siebennull.com spielt nicht nur mit unterschiedlichen Texturen sondern setzt auch Parallax Scrolling gekonnt ein. Hierbei kann der User die Seite mit der Maus hin und her bewegen.

parallax scroll

Quelle: siebennull.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -