Anzeige
Anzeige
UX & Design
Artikel merken

Vertikal war gestern: 10 schicke Webseiten mit Horizontal Scrolling

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

Von Ilja Zaglov
3 Min. Lesezeit
Anzeige
Anzeige
Die Agentur Asiance setzt auf Horizontal Scrolling. (Screenshot: t3n)

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)

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
14 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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-/

Antworten
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. ;)

Antworten
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 ;)

Antworten
Andreas

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

Antworten
Peleen

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

http://www.tealjoy.com

Antworten
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.

Antworten
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.

Antworten
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.

Antworten
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.

Antworten
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.

Antworten
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/

Antworten
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

Antworten
Holger Voss

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

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige