Das könnte dich auch interessieren

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

Design

Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends

    Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends

Parallax Scrolling ist einer der großen Webdesign-Trends dieses Jahres. Vor allem Geschichten lassen sich mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise ins Web übertragen. Um euch einen Überblick zu geben, haben wir 30 schicke Beispiele des Scrolling-Effektes herausgesucht.

Wenn sich einzelne Ebenen einer Website unterschiedlich schnell bewegen, entsteht beim Betrachter der Eindruck von Tiefe. Wir kennen den Effekt aus der physischen Welt, wenn wir etwa beim Zugfahren aus dem Fenster schauen. Nahe Objekte wie Menschen oder Häuser scheinen sich dann deutlich schneller zu bewegen als weit entfernte Objekte wie ganze Wälder oder Berge. Überträgt man diesen Effekt in die virtuelle Welt des Webdesigns, nennt man das Parallax Scrolling.

Parallax Scrolling: Die Entwicklung eines Webdesign-Trends

Parallax Scrolling ist in der digitalen Welt schon seit vielen Jahren im Einsatz. Vor allem Videospiele setzen auf den Effekt der Bewegungsparallaxe, schreibt unter anderem Liechtenecker. Populärer Vorreiter und Mitverursacher des Webdesign-Trends war Nike. Das US-Unternehmen veröffentlichte Anfang letzten Jahres die Website Nike Better World, die den Effekt des Parallax Scrolling zum Zeitpunkt der Veröffentlichung einsetzte.

Auch die zunehmende Verbreitung von HTML5 und CSS3 begünstigten den Einsatz des Parallax Scrolling. Die Verwendung der Webdesign-Techniken ist nicht zwingend notwendig, um den Effekt umzusetzen, erleichtert aber die Entwicklung damit einhergehender Details – beispielsweise Animationen und Übergänge. Unterstützend wirkte sich auch das Interesse am Storytelling aus, das in den vergangenen Jahren vor allem im Marketing Einzug hielt.

Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends

Wie Parallax Scrolling heutzutage eingesetzt wird, zeigen die folgenden dreißig Beispiele. Solltet ihr weitere Websites kennen, die den Effekt einsetzen, schreibt uns eure Links in die Kommentare. Wir würden uns freuen, diese Liste mit eurer Hilfe zu erweitern.

Dangers of Fracking

Wie clever Parallax Scrolling eingesetzt werden kann, um Zusammenhänge darzustellen, zeigt die Website Dangers of Fracking. (Screenshot: t3n)

ala

Die Website des Schweizer Design-Studios ala nutzt Parallax Scrolling um eigene Projekte vorzustellen. (Screenshot: t3n)

Ben the Bodyguard

Die Website der iOS-App erzählt die Geschichte des Bodyguards Ben – mithilfe von Parallax Scrolling. (Screenshot: t3n)

Spotify

Auch Spotify geizt nicht mit „parallaxen“ Effekten.
Auch Spotify geizt nicht mit „parallaxen“ Effekten. (Screenshot: t3n)

Billy's Diner

Billy's Diner: Ein kleines Unternehmen mit großartiger Website setzt auf Parallax Scrolling. (Screenshot: t3n)

Cantilever Fish & Chips

„Traditionelle Fish and Chips der besten Qualität“, verspricht Cantilever. Qualitativ hochwertig ist auch deren Website. (Screenshot: t3n)

Appmiral

Die Geschichte der App Appmiral erzählt einer kleiner Krebs, der den Besucher auf der Website begleitet. (Screenshot: t3n)

Aktion Mensch

Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling.
Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling. (Screenshot: t3n)

One57

Ein Skyscraper im digitalen Portrait: One57.
Ein Skyscraper im digitalen Portrait: One57. (Screenshot: t3n)

La Moulade

Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht.
Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht. (Screenshot: t3n)

Interaktive Infografik von expresssolicitors.com

Eine interaktive Infografik der besonderen Art.
Eine interaktive Infografik der besonderen Art. (Screenshot: t3n)

Unfold

Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website.
Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website. (Screenshot: t3n)

Savings Challenge

„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling.
„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling. (Screenshot: t3n)

Cyclemon

Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website.
Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website. (Screenshot: t3n)

5emegauche

Eine weitere Agentur-Website dieser Sammlung.
Eine weitere Agentur-Website dieser Sammlung. (Screenshot: t3n)

Broken Twill

Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling.
Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling. (Screenshot: t3n)

Scytale

Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling.
Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling. (Screenshot: t3n)

Srgint

Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen.
Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen. (Screenshot: t3n)

l’unita

Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling.
Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling. (Screenshot: t3n)

Serve Seattle

Parallax Scrolling eignet sich zum Geschichten erzählen.
Parallax Scrolling eignet sich zum Geschichten erzählen. (Screenshot: t3n)

Royal British Legion

Royal British Legion
Die Royal British Legion demonstriert mit einer Parallax-Scrolling Webseite, wie und wofür die Spendengelder für die RBL verwendet werden. (Screenshot: t3n)

25. Jubiläum des Gameboy

Parallax Gameboy
Eine kleine Kampagne von Ihatetomatoes.com nutzte das fünfundzwanzigste Jubiläum des Gameboys, um eine Parallax-Scrolling-Seite im Zusammenhang mit einem zum selben Thema angebotenen Kurs in Verbindung zu bringen. (Screenshot: t3n)

Sony - Be Moved

Sony – Be Moved
Für Sonys „Be Moved“-Kampagne in den USA wurde diese beeindruckende Parallax-Scrolling-Webseite geschaffen. (Screenshot: t3n)

Jacksonville Downtown Art Walk

Jacksonville Art Walk
Das Jacksonville Downtown Art Walk Festival präsentiert sich mit einer Parallax-Scrolling-Webseite. (Screenshot: t3n)

Make Your Money Matter

Make Your Money Matter
Finanzielle Themen können ganz schön langweilig sein. Make Your Money Matter erzählt mit Parallax Scrolling aber dennoch eine spannende Geschichte. (Screenshot: t3n)

Flat Design vs. Realism

Flat vs. Realism
Die interaktive Webseite Flat Design vs. Realism erklärt uns den Unterschied zwischen flat und skeumorphistisch – mit Parallax Scrolling. (Screenshot: t3n)

The Walking Dead Zombified

Walking Dead - Zombified
Alle, die schon immer mal wissen wollten, was es bedeutet ein Zombie bei Walking Dead zu sein, erfahren dies auf dieser Parallax-Scrolling-Webseite. (Screenshot: t3n)

Madwell

Madwell
Madwell ist eine New Yorker Agentur, die ihre Dienstleistungen mit schicken Parallax-Scrolling-Animationen präsentiert. (Screenshot: t3n)

Oakley

Oakley Airbreak
Oakley präsentiert die Airbrake-MX-Brille auf einer Parallax-Scrolling-Kampagnenseite. (Screenshot: t3n)

 Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013. Autor des Originalartikels ist Lars Budde.

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

26 Reaktionen
Forex
Forex

Die Webseite von Cyclemon sieht hammer aus. Mit parallax lässt sich so einiges machen und der Trend wird meiner Meinung nach zunehmen.

Antworten

Iris Kombeny
Iris Kombeny

Schöner Beitrag, richtig schöne Websites sind dabei. Und wie sieht es in 2015 aus? Flat und Responsive bleiben die zwei Haupttrends: https://www.1min30.com/?p=18113

Antworten

Torsten
Torsten

Parallax Scrolling ist nervig und stirbt einen langsamen Tod. Daran ändert auch dieser Artikel nichts mehr.

Antworten

Asdf
Asdf

Ist das hier content recycling oder was soll diese ganz tolle neue news auf der main page?

Antworten

Tumb
Tumb

Die Beschreibung im Text entspricht dem, was ich unter Parallaxe Scrolling verstehe (Erzeugung von Tiefe durch verschiedene Scrollgeschwindigkeit), aber viele der Seiten haben solche Effekte doch gar nicht, oder hab ich die nur nicht gesehen?

Antworten

gravik
gravik

Wir mögen Parallax ;-) .... s. http://www.gravik.de

Antworten

Karl
Karl

Die Kompetenzen sorgen für einen elleptischen Anfall und bei der Karte wurde vergessen die Maus-Scroll-Zoom-Funktion zu deaktivieren oder wie denkt ihr zu scrollen?

P.s. Arbeitet ihr im Produktivbetrieb wirklich schon mit Drupal 8?

Antworten

gravik
gravik

Hey Karl,
vielen Dank für Deine konstruktive Kritik! Die Zoom Funktion haben wir genau wegen Dir aktiv gelassen, damit Du in diesem Bereich nicht scrollen kannst. ;-)
Gerne kannst Du Dich bei uns bewerben, wir sind immer auf der Suche nach "Profis"!

leon.baader.3
leon.baader.3

Ich würde die Liste noch ergänzen um dieses schicke Beispiel: http://www.peek-und-cloppenburg.de/de/trends/

Antworten

Lars Budde

Bezüglich der oft disktuierten SEO-Themathik im Kontext des Parallax Scrolling ist mir gerade dieser Artikel untergekommen: http://mmarley.com/parallax-scrolling-and-seo-are-100-compatible-clearing-up-the-misconception/

Dort heißt es klar und deutlich: Parallax Scrolling – richtig umgesetzt – schadet nicht den Rankings.

Antworten

Marko
Marko

Die erste und dritte Seite ist der Hammer, da hat der Effekt einen sinn aber bei Aktion Mensch kann man die hälfte nicht richtig lesen oder taucht erst auf wenn man zuweit gescrollt hat.

Für Sachen wie bei der Ersten Seiten ist sowas sicher gut geeignet aber nicht mit viel Content/Text.

Antworten

dot_SB
dot_SB

Wie immer bei allen visuellen Effekten - Es ist dann cool, wenn es die Story unterstützt und ins Konzept eingebettet ist. Abgesehen von der Barrierefreiheit ist es häufig effektiver, Parallax Scrolling zu vermeiden und der Usability und gelernten Navigations-Mustern den Vortritt zu lassen. Aber das ist nun mal wie die Entwicklung im Internet so oft läuft. Erst die Erforschung, dann die Mäßigung.

Antworten

stachu674
stachu674

Trend hin oder her... Ich habe das Thema in meiner Master-Thesis ausgiebig beleuchtet und mich dabei auf den Aspekt der User Experience konzentriert. Wer sich dafür interessiert, kann die Arbeit gerne lesen: http://michaschreibt.wordpress.com/2013/09/02/meine-master-thesis/

Viele Grüße,
Micha

Antworten

eric
eric

Parallax Scrolling richtig eingesetzt und vor allem zum Thema passend, ist sicher eine tolle Sache, aber man kann es auch übertreiben! Peinlich wird es wenn die Seite nicht richtig funktioniert und man deshalb wichtige Besucher verliert.

Antworten

Annie
Annie

Wie schon geschrieben ist die Usability mehr wie fraglich, schönes aussehen ist eben nicht alles ;)

Antworten

WebdesignStuttgart
WebdesignStuttgart

Ich habs auch mal versucht mit einem sich zueinander verschiebenden Hintergrund: http://hypnosezentrum-gassmann.info/

Gruß

http://webdesign.freakinthecage.de

Antworten

Carsten
Carsten

Passt bestens zum Skyscraperprojekt in Midtown Manhattan (NYC): http://one57.com/#!/building

Antworten

Felix
Felix

Schön ist es ja, neu nicht.
Für SEO eine Katastrophe und Barrierefrei öhhh auch nicht.
Das kann man machen wenn man beeindrucken will, ist aber in der Praxis nicht einsetzbar.
Ich denke bei "normalen" Seiten sollte man besser in Richtung "Responsive" gehen.

Antworten

HTMLnogo
HTMLnogo

Geht mit Flash seit 1998 und dort war der Effekt schon seit 1999 out. Naja die HTMLer hinken eh immer etwas hinterher...

Antworten

Lali
Lali

noch ein dezentes Beispiel: http://atrego.de/

Antworten

Robert S
Robert S

Yeah. Perfekt um den Browser bei jedem Netbook abzuschießen. Nett aber mehr nicht. Zu leistungshungrig und in manchen Fällen sogar ein wenig zu viel Effektspielerei.
Naja ein Trend kommt und geht.

Antworten

manuel
manuel

haben wir bereits im vergangenen jahr als nicht mehr zeitgemäß abgehakt. auch weil schwierig umsetzbar hinsichtlich diverser unterschiedlicher endgeräte, gerade im mobilen segment. würde für 2012 eher trends wie responsive oder mobile first anführen... wobei das natürlich auch schon länger thema ist...

Antworten

Florian
Florian

Ich finde das kann man gut einsetzen, ist mir aber teilweise zu Arg. Bei der ala Seite kriege ich fast einen epileptischen Anfall, errinert mich ein wenig an die Zeiten in denen man alles mit animierten Gifs zugepflastert hat.

Hier ist ein etwas dezenteres Beispiel, ich finde das geht gut:
http://www.oakley.com/snow

Antworten

El Gringo
El Gringo

Och, meine Webseite hätte da auch gut reingepasst :/

Antworten

mebulon
mebulon

Ich finds cool.
Ich finde es ist auch schön zu benutzen.
So lang es für Touchgeräte eine gute anpassung / alternative gibt.

Beispiele sind noch:

http://grindspaces.com/

http://www.jesusculture.com/nyla/ny.html

Antworten

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

Abbrechen