18 coole Parallax Websites

Vier Monate nachdem ich dieses Blog hier gestartet habe, fing ich im März 2001 als Autodidakt in einer Webagentur in Ludwigsburg an. Und während die Web-Krise die Firma einmal durchschüttelte blieb ich als Mann für HTML und CSS an Bord. In den darauf folgenden fast fünf Jahren wurde ich HTML- und CSS-Profi, erlernte PHP, … So Zeug halt.
Heute greife ich nur noch selten zum HTML-Editor, eigentlich nur noch für Freunde. Aber HTML 5, CSS 3 und jQuery sind trotz allem keine Unbekannten für mich – ich halte mich auf dem Laufenden, wenn auch eher als Hobby.

Bis heute hat für mich nicht an Faszination verloren, was mit etwas HTML, CSS und JavaScript möglich ist – seit jQuery und HTML 5 ja noch mehr als früher. Ich lasse mich da gern begeistern. „Früher, was haben wir uns da für diesen Effekt abgemüht!“

Eines der coolsten Dinge, an denen ich mich in diesem Jahr trendtechnisch kaum satt sehen mag ist der „Parallax“-Effekt. Dabei verschieben sich beim Scrollen Bilder oder Elemente „versetzt“ zu einander.
Erstmals vor über einem Jahr auf der (mittlerweile überarbeiteten) Nike Better World-Website eingesetzt, hat dieser Effekt mittlerweile viele Freunde gefunden. Ich finde ihn unheimlich spannend, weil man ihn recht Browserkompatibel mit wenig Javascript herzaubern kann …

Im Folgenden stelle ich deshalb einfach 18 schicke Parallax Websites vor. Dabei habe ich mich nicht im Quelltext rumgetrieben und urteile nach gutem oder schlechten Code, sondern rein auf Effektbasis. Wie oben erwähnt bin ich kein Programmierer mehr, der auf die „Schönheit des Codes“ achten muss 😉

The One57

The One 57
Direkt am Central Park steht dieses neue Luxus-Hochhaus in New York. Bekannt wurde es während Sandy, weil ein Baukran sich abseilen wollte … Die Website erzählt nicht viel, ist aber edel und effektvoll umgesetzt.

NIKE Fly Over

Nike
Mit A Better World haben sie den Trend ausgelöst – auf der Seite zu einem Schuh wenden sie ihn weiterhin an. Und zwar in einem sagenhaften Umfang.

Cultural Solutions UK

Cultural Solutions
Die Website ist nach dem ersten laden recht unscheinbar – aber genau das mag ich auch am Parallax Effekt so: Dass man mit ganz dezentem Einsatz wirklich Abwechslung ins Spiel bringen kann.

Jan Ploch

Jan Ploch
Die Website von Jan saugt man aus. Sprichwörtlich? Nein, ganz real. Eine wunderbare Spielerei!

iutopi

iutopi
Eine kleine Agentur für Webdesign in Argentinen, die den Parallax Effekt in seiner ursprünglichen Form zeigt. Somewhere under the sea

James Bond Cars

Bond Cars
Evans Halshaw zeigt hier zum 50. Geburtstag des berühmtesten Geheimagenten (sic) nicht nur alle Autos von James Bond, sondern auch, wie man Parallax wunderbar einsetzen kann. Toll gemacht!

Web-Expert

Web Expert
Marco Sors ist ein Pixelsoldat – zumindest erweckt die Website des Italieners diesen Eindruck. Auf wunderbarem 8-Bit-Background präsentiert er nicht nur mit Text sondern auch wunderbaren Effekten sein Können.

NH Hostels

NH Hostels
Website mit Winter-Sonderangeboten der Hostel-Kette. Großartige Stimmung mit Parallax und einigen „Schneeflocken“, die hier erzeugt wird.

Gidsy Library

Gidsy
Gidsy setzt den Parallax-Effekt auf einer sehr simplen Seite ein, um einige Dinge zur Nutzung des Dienstes zu erklären. Aber gerade diese Simplizität zeigt, dass der Effekt eben auch „einfach“ begeistern kann.

Smokey Bones

Smokey Bones
Wer Hunger hat, sollte diese Seite meiden. Hier fliegen Chips, Burger-Zutaten und leeren sich Biergläser. Lecker …+

Honda CRV

Honda CRV
Honda macht vor, wie Seiten zu Autos heute aussehen müssen: Stylisch, Informativ, mindestens mit ebenso viel „Aha“-Effekt, wie ein Ausflug mit dem Auto selbst. Die US-Seite zum Honda CRV ist beeindruckend.

Krystalrae

Krystalrae
Die Mode-Websites zeigt, wie man Mode auch präsentieren kann – und künftig wohl auch häufiger noch gezeigt bekommt im Web. Ein Vorreiter.

InTacto – 10 Years

InTacto
Die Kreativ-Agentur InTacto feiert 10jähriges und zeigt mittels einer wunderbar illustrierten und parallaxigen Websites die Höhepunkte ihres Schaffens.

The Night before Moving Day

Moving Day
Mit dem Parallax-Effekt kann man sich ordentlich austoben. Diese Microsite der Agentur Bamstrategy ist ein wunderschönes Beispiel von Tonnen voller Parallax-Effekte – wäre es eine „normale“ Seite, würde es überborden. Als Microsite jedoch ist es eine Freude sie anzusehen.

Atlantis World Fair

World Fair
Wunderbare Spielerei – und mehr nicht: Scrolldaumen vorwärmen und abtauchen. Zu einer der „Vergessenen Weltausstellungen“, die 1962 in Atlantis stattfand. Es gibt noch zwei weitere Ausstellungen, programmiert vom Webdesign-Studie um Jason Santa Maria.

Peugeot The Hybrid Mission

Peugeot Hybrid
Wow – das muss man gesehen haben: Peugeot erweckt eine Graphic Novel mittels Parallax-Effekten zum Leben. Eine ganz neue Form, um in einem „Comic“ für Spannung zu sorgen. Toll gemacht.

tinke

tinke
Dass man auch Produktseiten mit Parallax perfekt in Szene setzen kann, zeigt Honda ja oben. Tinke geht noch etwas weiter – hier ist das Prdodukt immer im Mittelpunkt des Effekts und wandelt sich mit den Einsatzgebieten. Hier ist der Effekt zur Untermalung der Funktionen genutzt, nicht des Effektes wegen.

Portlandia

Portlandia
Microsite zur TV-Serie Portlandia, die den Parallax-Effekt mit viel Liebe zum Detail einsetzt. Die Seite ist schon ein Augenschmaus beim durchscrollen und bietet unheimlich viele Ecken und Kanten (im wahrsten Sinn des Wortes), hinter denen man Inhalte entdecken kann. Toll!

Nicht erwähnt in der Liste: Seiten wie Mario Kart oder Laurentius, die zwar gut gemacht sind, aber den Gummibandeffekt bei OSX nicht mit berechnen. Indem ich zwar nach unten scrolle, aber nach rechts gelenkt werde, zuckt die Seite nach.

Noch mehr? Dann schaut mal hier bei Awwwards: 30 Great Websites with Parallax Scrolling und 28 amazing parallax scrolling sites im Webdesigner Depot.

Wer jetzt Lust bekommen hat, sich selbst auszuprobieren: Tripwire Magazin stellt einige Website und jede Menge Plugins und Tutorials vor.

Veröffentlicht am
Kategorisiert in Allgemein Verschlagwortet mit

Ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.