Drücke die Tasten ◄ ► für weitere Artikel  

Parallax Scrolling: 25 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 25 schicke Beispiele des Scrolling-Effektes herausgesucht.

Parallax Scrolling: 25 schicke Beispiele des Webdesign-Trends
Parallax Scrolling.

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 , 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 Aimationen und Übergänge. Unterstütztend wirkte sich auch das Interesse am Storytelling aus, das in den vergangenen Jahren vor allem im Marketing Einzug hielt.

Parallax Scrolling: 25 schicke Beispiele des Webdesign-Trends

Wie Parallax Scrolling heutzutage eingesetzt wird, zeigen die folgenden zehn 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.

ala

Die Website des Schweizer Design-Studios ala nutzt Parallax Scrolling um eigene Projekte vorzustellen.

Ben the Bodyguard

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

Nissan March

Nissan beweist, dass sich auch Produkte auf diese Weise präsentieren lassen.

Spotify

Auch Spotify geizt nicht mit „parallaxen“ Effekten.
Auch Spotify geizt nicht mit „parallaxen“ Effekten.

Billy's Diner

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

Nike Air Jordan

Mit der Website zum Nike Air Jordan legt der US-amerikanische Sportartikelhersteller noch einmal nach.

Eric Johannsson

Der schwedische Designer Eric Johansson radelt für die Besucher seiner Website, die Parallax Scrolling prominent einsetzt.

Cantilever Fish & Chips

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

Appmiral

Die Geschichte der App Appmiral erzählt einer kleiner Krebs, der den Besucher auf der Website begleitet.

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.

One57

Ein Skyscraper im digitalen Portrait: One57.
Ein Skyscraper im digitalen Portrait: One57.

Oakley

Oakley präsentiert sich mittels Parallax Scrolling als Liebhaber des „Champagne Powder“.
Oakley präsentiert sich mittels Parallax Scrolling als Liebhaber des „Champagne Powder“.

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.

Interaktive Infografik von expresssolicitors.com

Eine interaktive Infografik der besonderen Art.
Eine interaktive Infografik der besonderen Art.

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.

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.

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.

5emegauche

Eine weitere Agentur-Website dieser Sammlung.
Eine weitere Agentur-Website dieser Sammlung.

Broken Twill

Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling.
Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling.

Scytale

Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling.
Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling.

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.

l’unita

Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling.
Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling.

Serve Seattle

Parallax Scrolling eignet sich zum Geschichten erzählen.
Parallax Scrolling eignet sich zum Geschichten erzählen.

Fall in Tennessee

„Fall in Tennesse“: Ein Projekt zeigt all seine Facetten.
„Fall in Tennesse“: Ein Projekt zeigt all seine Facetten.

Letztes Update des Artikels: 29. Oktober 2013

Autor:
255 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
46 Antworten
  1. von Tom Kirschner via facebook am 29.10.2012 (12:52Uhr)

    Trendy sein = Unbeständig sein

  2. von Daniel Ahrend via facebook am 29.10.2012 (12:52Uhr)

    Ich würde sowas höchstens für Landingpages einsetzen.

  3. von Alexander Walz via facebook am 29.10.2012 (13:07Uhr)

    Für mich ist das nichts weiter als eine sinnlose Spielerei. Sieht schön aus, die Usability ist aber mehr als bescheiden.

  4. von Steffen Siegrist via facebook am 29.10.2012 (13:09Uhr)

    Das Thema ist eigentlich schon wieder durch: https://twitter.com/smashingmag/status/254347081190367232

  5. von mebulon am 29.10.2012 (13:23Uhr)

    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

  6. von Jutta Kemperle via facebook am 29.10.2012 (13:29Uhr)

    Parallax - I love it and I hate it. Im Fall der Frecking-Seite oder Ben Bodygard macht Parallax meines Erachtens Sinn und spricht den Abenteuer- und Spieltrieb an.In vielen anderen Seiten ist es mir jedoch einfach zu heftig. Zu viel Effekt ist schlichtweg kontraproduktiv, vor allem dann, wenn Effekt für sich alleine steht. Es lenkt vom Inhalt ab oder macht es zumindest anstregend sich darauf zu konzentieren.

  7. von El Gringo am 29.10.2012 (13:47Uhr)

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

  8. von Florian am 29.10.2012 (14:21Uhr)

    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

  9. von manuel am 29.10.2012 (15:27Uhr)

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

  10. von Robert S am 29.10.2012 (15:32Uhr)

    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.

  11. von Melanie Nanni Bernshausen via facebook am 29.10.2012 (16:15Uhr)

    da ist noch eine http://atrego.de/ (y)

  12. von Lali am 29.10.2012 (16:18Uhr)

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

  13. von HTMLnogo am 29.10.2012 (16:41Uhr)

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

  14. von Felix am 29.10.2012 (19:42Uhr)

    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.

  15. von Carsten am 29.10.2012 (19:57Uhr)

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

  16. von WebdesignStuttgart am 30.10.2012 (08:13Uhr)

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

    Gruß

    http://webdesign.freakinthecage.de

  17. von Annie am 30.10.2012 (11:13Uhr)

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

  18. von eric am 30.10.2012 (13:09Uhr)

    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.

  19. von Webdesign-Trends: 10 Dinge, die uns 2013… am 08.11.2012 (08:01Uhr)

    [...] Weitere Beispiele für den Webdesign-Trend Parallax Scrolling hatten wir euch schon hier gezeigt. [...]

  20. von Web Design Trends 2013 | Achim Baur am 21.03.2013 (11:18Uhr)

    [...] wird mehr und bewusster eingesetzt und es darf wieder gescrollt werden – gerne auch per Parallax Scrolling. HTML5 und CSS3 werden sich weiter verbreiten und große Buttons sind weiterhin angesagt, u.a. da [...]

  21. von Flat Design im E-Commerce: 25 Beispiele… am 21.04.2013 (11:30Uhr)

    [...] setzt nicht nur auf ein schlichtes Design, auch Parallax Scrolling kommt zum [...]

  22. von Flat Design im E-Commerce: 25 Beispiele… am 22.04.2013 (09:05Uhr)

    [...] setzt nicht nur auf ein schlichtes Design, auch Parallax Scrolling kommt zum [...]

  23. von » Parallax Scrolling: 10 schicke B… am 23.05.2013 (16:07Uhr)

    [...] Zum Bericht auf t3n gehts hier. [...]

  24. von iOS 7 – Die ersten Eindrücke R… am 11.06.2013 (13:00Uhr)

    [...] Von – ich will es mal so nennen – dreidimensionalen Icons und Skeuomorphismus zum Flat-Design und Parallaxen Layern [...]

  25. von Verpackungsfreude von Richard Preston -… am 23.06.2013 (05:28Uhr)

    [...] 10 schicke Beispiele des Webdsign Trends von Lars Budde. [...]

  26. von stachu674 am 02.09.2013 (15:30Uhr)

    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

  27. von dot_SB am 29.10.2013 (17:01Uhr)

    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.

  28. von Marko am 31.10.2013 (02:20Uhr)

    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.

  29. von Lars Budde am 01.11.2013 (09:12Uhr)

    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.

  30. von Was kostet eine Webseite? am 01.11.2013 (09:35Uhr)

    […] Bei dem Parallax Scrolling bewegen sich die Hintergrundbilder langsamer als die Bilder im Vordergrund. Diese Technik sorgt für einen interessanten Effekt. Beispiele für Parallax Scrolling werden in diesem Artikel beschrieben. […]

  31. von leon.baader.3 am 07.11.2013 (11:44Uhr)

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

  32. von Wir haben doch keine Zeit | Simplease Bl… am 11.11.2013 (19:54Uhr)

    […] Websites, auf denen Parallax-Scrolling eingesetzt wird, sehen einfach atemberaubend aus. Sie ziehen einen regelrecht in ihren Bann und […]

  33. von Internet Marketing Tipps | 25 schicke Be… am 12.11.2013 (11:32Uhr)

    […] Der ganze Artikel —> Hier weiterlesen! […]

  34. von Publishing-Plattform der Zukunft: Medium… am 05.12.2013 (12:09Uhr)

    […] über den gesamten Screen zu strecken. Scrollt man zum eigentlichen Artikel, setzt ein schicker Parallax-Scrolling-Effekt ein, bei dem die Überschrift und der Name des Autors langsam ausgeblendet werden. Solche […]

  35. von Multimedia-Storytelling: Diese 25 beeind… am 09.12.2013 (09:38Uhr)

    […] Durch zweispaltige Inhalte und unterschiedliche Scroll-Geschwindigkeiten (basierend auf dem Parallax-Scrolling-Effekt) wirkt das Stück interaktiv und […]

  36. von Interview: Snow Fall und die Folgen | Ma… am 16.12.2013 (23:42Uhr)

    […] mit dem Titel “Snow Fall: The Avalange at Tunnel Creek“. In dieser Form (Parallax-Scrolling) und in der Zusammenstellung multimedialer Inhalte wurde “Snow Fall” zum Stil bildenden […]

  37. von Neue journalistische Darstellungsformate… am 19.12.2013 (20:32Uhr)

    […] mit dem Titel “Snow Fall: The Avalange at Tunnel Creek“. In dieser Form (Parallax-Scrolling) und in der Zusammenstellung multimedialer Inhalte wurde “Snow Fall” zum Stil bildenden […]

  38. von Webdesign-Trends 2014: Das erwartet Webw… am 01.01.2014 (12:01Uhr)

    […] man liebt es oder man hasst es: Parallax Scrolling. Die Technik stammt ursprünglich aus dem Videospiel-Design und dient dazu, die […]

  39. von gravik am 08.01.2014 (12:22Uhr)

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

  40. von Geschichten erzählen in schön –… am 06.03.2014 (16:25Uhr)

    […] Einen interessanten und aufschlussreichen Artikel mit spannenden Beispielen habe ich neulich auf der… […]

  41. von Scroll-Activated-Animations: So schick i… am 08.03.2014 (17:17Uhr)

    […] Jahr stattgefunden hat, und nutzt eine bunte Cartoon-Welt mit Scroll-aktivierten-Animationen, Parallax-Scrolling und […]

  42. von Trends im Webdesign: Parallax Scrolling am 31.03.2014 (13:37Uhr)

    […] wie das Onlinemagazin t3n.de erklärt. In einem Artikel zum Thema Parallax Scrolling stellt t3n.de 25 Beispiele für Webdesign mit Parallaxeneffekt […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Webdesign
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen