Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Vertikal war gestern: 10 schicke Webseiten mit Horizontal Scrolling

Die Agentur Asiance setzt auf Horizontal Scrolling. (Screenshot: t3n)

Vertikal kann jeder. Diese zehn Beispiele zeigen, wie schick horizontal scrollbare Seiten aussehen können.

Vertikales Scrollen ist langweilig. Jeder macht es, es überrascht einfach nicht. Wir wollen etwas Neues sehen. Na gut, so schlimm ist es natürlich nicht. Dennoch: Der Bildschirm hat nicht umsonst zwei Achsen, und und auch Microsoft versucht mit Windows 8, unseren Horizont zu erweitern. Aber auch die nachfolgenden Seiten zeigen, dass horizontales Scrollen durchaus seine Vorzüge haben kann.

Joey’s Pizza

Joey's Pizza
Joey's Pizza nutzt Horizontal Scrolling. (Screenshot: t3n)

Pizza geht eigentlich immer. Und Joey’s Pizza weiß, wie man Hunger auf mehr macht. Die Webseite der Pizza-Kette setzt Horizontal Scrolling mit Fotos von lecker belegten Pizzen um. Im Vollbildmodus will man da fast schon in den Bildschirm greifen.

Horizontal Scrolling: Joey's Pizza

Gavin Castelton

Gavin Castleton
Die Webseite von Gavin Catleton nutzt Horizontal Scrolling. (Screenshot: t3n)

Der Musiker Gavin Castleton nutzt einen horizontalen Scroll-Effekt auf der Webseite zu seinem aktuellen Album. Zwar kann man nicht mit der Maus oder dem Touchpad scrollen, doch der horizontale Scroll-Effekt, der bei der Benutzung der Navigation ausgelöst wird, erzielt zusammen mit den Grafiken der Webseite einen schicken Effekt.

Horizontal Scrolling: Gavin Castelton

Peter Pearson

Peter Perason
Peter Pearson stellt sich auf seiner Horizontal-Scrolling-Webseite vor. (Screenshot: t3n)

Peter Pearrcon ist ein Webentwickler aus London und stellt sich auf seiner Webseite mit einer interaktiven Horizontal Scrolling Webseite vor.

Horizontal Scrolling: Peter Pearson

Gudang Damansara

Gudang Damsara
Gudang Damsara nutzt Horizontal Scrolling. (Screenshot: t3n)

Der Möbelhersteller Gudang Damansara präsentiert sich auf dieser minimalistischen Seite mit einem Horizontal-Scroll-Effekt.

Horizontal Scrolling: Gudang Damansara

Asiance

Asiance
Die Agentur Asiance setzt auf Horizontal Scrolling. (Screenshot: t3n)

Asiance ist eine asiatische Werbeagentur, die auf der Unternehmensseite horizontal scrollbare Sektionen einsetzt, um Informationen zum Unternehmen und Referenzen zu präsentieren.

Horizontal Scrolling: Asiance

Stephane Tartelin

Stephan Tartelin
Stephan Tartelin setzt seine Illustrationen mit Horizontal Scrolling in Szene. (Screenshot: t3n)

Der Illustrator Stephan Tartelin nutzt eine horizontal scrollbare Webseite, um eine Kunstwerke in einer Galerie in Szene zu setzen.

Horizontal Scrolling: Stephane Tartelin

Makepretend New York

Makepretend
Das kreative Duo Makepretend nutzt Horizontal Scrolling. (Screenshot: t3n)

Makepretend ist ein Zusammenschluss von den New Yorker Kreativen Anna Vokal und Nate Turner. Auf ihrer Webseite nutzen Makepretend auf einen horizontalen Scroll-Effekt, der sowohl durch die Maus als auch durch einen Regler am unteren und oberen Bildschirmrand bedient werden kann und setzen so mit Text, Bild und Video ihre Arbeiten gekonnt in Szene.

Horizontal Scrolling: Marepretend

C.L. Holloway

C.L. Holloway
C.L. Holloway realisiert mit Horizontal Scrolling einen virtuellen Galerie Rundgang. (Screenshot: t3n)

Der Künstler C.L. Holloway setzt mit der Horizontal-Scrolling-Technik eine „virtuelle Galerie“ für seine Arbeiten um.

Horizontal Scrolling: C.L. Holloway

Collaborative Fund – The Future of Car Sharing

Collaborative Fund
Die Zukunft des Car-Sharings mit Horizontal Scrolling erklärt. (Screenshot: t3n)

Collaborative Fund will uns mit einer virtuellen Autofahrt das Car-Sharing schmackhaft machen. Da Autos eher selten vertikal fahren, kommt auch hier die Horizontal-Scroll-Technik zum Einsatz.

Horizontal Scrolling: Collaborative Fund

Black 5

Black 5
Grieson nutzt auf der Black 5 Produktseite Horizontal- und Parallax-Scrolling. (Screenshot: t3n)

Was ist besser als Oreo? Wahrscheinlich gar nichts. Aber die Webseite von Grieson’s Black 5 weiß den schwarzen Klon der Kekse mit Horizontal- und Parallax-Scrolling schmackhaft in Szene zu setzen.

Horizontal Scrolling: Black 5

Und welche Seiten kennt Ihr, die Horizontal Scrolling gekonnt einsetzen? Wir freuen uns auf eure Lieblingsseiten in den Kommentaren!

Bitte beachte unsere Community-Richtlinien

13 Reaktionen
Holger Voss

Für so eine Webseite ist horizontales Scrollen okay....

Michael

Hi,

da fehlt noch die Webseite von kaisers & tengelmann http://www.kaisers.de. Schön flach gehalten, da nicht viele Inhalte vorhanden sind.

nice day

Thomas

Um Preisvergleiche für LEGO Angebote übersichtlich darzustellen, habe ich auch auf horizontales scrollen gesetzt. Es würde mich interessieren, was ihr davon haltet: http://www.brickmerge.de/

Andreas

@Andi und @Torsten:
Ich gebe euch beiden Recht, es ist gewöhnungsbedürftig und auch unsere Entwickler haben uns zu Beginn den Vogel gezeigt.

Im Endeffekt sind wir aber der Meinung, dass diese Art von Websites für manche Einsatzzwecke funktioniert (Portfolios etc.), sicherlich aber kein Trend werden kann und sollte.

ocaner

@Andi @Andreas @Torsten:
Ihr habt schon recht und zwar IMHO liegt es einfach daran, dass man bei den meisten PCs noch gewöhnliche Mäuse mit einem Rad bzw. Touchpads mit Scrollgesten einsetzt, was in der Regel für vertikales Scrollen ausgelegt ist. Die meisten Webseiten bzw. Widgets mit Horizontalen Scrollen lassen genau diese Art Bedienung komplett außer acht.

Horizontales Scrollen funktioniert teilweise besser auf Touch basierten Geräten wo man die Inhalte hin und her wischt. Es gibt aber auch Ausnahmen, z. B. wo durch die Verwendung von mehreren Scrollachsen die Bedienung erschwert wird.

Torsten

Das Beispiel von Andreas ist wirklich sehr schön, aber leider gilt bei vielen Webdesignern immer noch die Faustregel - Horizontal Scrolling ist ein No-go!

Auch ich persönlich habe mit dieser Scrolling-Art meine Schwierigkeiten, aus den gleichen Gründen wie Andi. Sicher, es ist mal "nett" eine andere Methode zu sehen, doch wird wohl dies immer eine Randgruppe bleiben.

Andi

Also ich kann mich mit dem horizontalen scrollen einfach nicht anfreunden. Das kommt mir einfach immer falsch vor :) liegt vermutlich daran das einem in der Webentwicklung immer eingetrichtert wird "horizontale Scrollbalken sind böse". Aber gelernt ist gelernt. Ich denke sofort an einen Fehler wenn ich solche Scrollbalken sehe.

Chio

Ich glaub vor 10 Jahren hab ich die erste horizontale Site gemacht. Dazwischen immer wieder mal, wenns gepasst hat - und der Kunde mutig war ;-)
http://www.ausgezeichnet.com/karikatur-galerie/karikaturen.php
Mittlerweile auch responsiv:
http://www.manameierei.com/
http://shopdessous.at/ (man beachte die dezente Parallaxe ;-)

Die Sache ist oft etwas heikel. Manche jQuery-PlugIns und Touch-Bedienung machen Ärger, auch manche User beschweren sich.

Peleen

Ist zwar im Bereich des vertikalen scrollens anzusiedeln,
aber hier kann man wirklich lange scrollen:

http://www.tealjoy.com

Andreas

@David: Vielen Dank für das Lob! Gebe es gerne an unsere Gestalter und Entwickler weiter :)

Andreas

Teilweise wirklich schöne Beispiele mit dabei. Schade ist aber, dass die meisten Websites das horizontale Scrollen nicht komplett durchziehen, sprich auf mobilen Geräten wieder eine vertikale Version genutzt wird.

Bei unserer Website haben wir versucht, dass Konzept komplett durchzuziehen: http://361.de
War nicht einfach und manche Browser machen hier auch Ärger..aber wenn schon, dann konsequent. ;)

David Haas

@ Andreas // Wow also eure Seite finde ich von den Beispielen mit Abstand am besten. Vor allem funktioniert sie am Ipad im Gegenstatz zu den anderen Beispielen viel besser und das Design ist schön clean und nicht zu überladen ;)

Ralf Hertsch

Der Link http://www.joeys.de/list/classics führt beim ersten Aufruf auf eine Fehlerseite, es muss wohl erst der Standort festgelegt sein ... 8-/

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst