Ihr Browser ist veraltet
Um sicher im Internet zu surfen und moderne Websites richtig darzustellen, empfehlen wir Ihnen ein Update.
Hier auf Updates prüfen
schließen

19.09.2023

Der Parallax-Effekt

Der Parallax-Effekt

Das moderne Webdesign springt gern von einem Trend in den nächsten – immer mit dem Ziel die Webseiten noch ansprechender und auch aufregender zu gestalten. Es sollen Webseiten entstehen, an die sich die Nutzer erinnern. Seit einigen Jahren geistert der Parallax-Effekt im Fachjargon der Webentwickler umher und ist ein bis heute gern genutztes Stilmittel, um Seiten eine gewisse Dynamik zu verleihen.

Der Parallax-Effekt wird in der Wahrnehmungspsychologie erklärt. Es geht um unterschiedliche Perspektiven und der daraus resultierenden differenzierten Wahrnehmung. Ein bekanntest Beispiel ist eine Zugfahrt. Wird der Blick aus dem Fenster in die Ferne gerichtet, zieht die Landschaft langsam vorbei. Wird jedoch auf Bäume, die direkt neben den Gleisen stehen, geblickt, ziehen diese bei voller fahrt so schnell vorbei, dass Details gar nicht mehr sichtbar sind. Diese Ebenen bewegen sich scheinbar in unterschiedlichen Geschwindigkeiten.

Die Anfänge

Diese Erkenntnis wurde für Videospiele genutzt, um Raumtiefe zu erzeugen. Gerade bei sogenannten Side-Scroller-Spielen wie Flappy Bird oder Jump ´n Run Spielen wie New Super Mario Bros kam diese Bewegungsparallaxe zum Einsatz. Hier spricht man auch von einem horizontalen Parallalx.

Der Einzug in das Webdesign fand dann in den 2010er Jahren statt. Nike war einer der ersten großen Konzerne, der diesen aufkommenden Trend in einer Website verarbeitete. Mit „Nike Better World“ brachten sie den Parallax-Effekt weiter voran. Da die Seite heute nicht mehr existiert, hier der Link zu einem Screenrecording.

Auch an den Google Trends lässt sich gut erkennen, dass das „parallax scrolling“ 2011 an Aufmerksamkeit gewann und im Jahr 2014 den Höhepunkt erreichte, was Suchanfragen bei Google betrifft.

Der Effekt kommt nun also bereits seit über 10 Jahren im Webdesign vor und wird noch immer häufig verwendet - doch was bringt er und wie genau wird er angewendet?

Anwendung

Der Effekt entsteht, wenn sich überlagernde Elemente in unterschiedlichen Geschwindigkeiten bewegen. Das wird beim Nike Beispiel deutlich: Der Hintergrund bewegt sich beim Scrollen schneller als der Text. Der Effekt tritt auch auf, wenn der Hintergrund stehen bleibt, sich also gar nicht bewegt und die Inhalte vorbei scrollen, wie es beispielsweise hier der Fall ist: https://work.antonandirene.com/mplus/

Genutzt wird der Effekt auf Webseiten vor allem als Storytelling-Element. Schöne Beispiele sind die Zumi Gucci Seite sowie die Darstellung einer kompletten Geschichte, wie es der australische Broadcaster SBS umgesetzt hat.

Weitere Besispiele

http://cyclemon.com/

http://www.firewatchgame.com/

https://gardenestudio.com.br/index.php

Das Designstudio Boy-Coy nutzt gleich mehrere Ebenen.

Im Webdesign wird generell eher der vertikale Parallax Effekt angewandt. Doch wie alles, hat auch das Parallax Scrolling seine Nachteile.

Herausforderungen

Überforderung

Alles in Maßen – das gilt auch bei der Verwendung des Parallax Effekts. Schnell kann er zu viel werden und Besucher abschrecken. Besonders, wenn dadurch Informationen schwerer zu erreichen sind und die Navigation innerhalb einer Seite behindert wird. So sollte darauf geachtet werden, dass der Einsatz einer Bewegungsparallaxe im Sinne des Nutzers ist und nicht nur eingebaut wird, um die Besucher länger auf der Seite zu halten.

Performance

Mehr Aktionen bedeuten mehr Zeilen Code und sind rechenintensiv. Insbesondere für ältere und leistungsschwächere Geräte stellt das ein Problem dar und kann das Nutzererlebnis negativ beeinträchtigen.

Quellen

https://liechtenecker.at/blog/parallaxes-scrolling/

https://t3n.de/news/parallax-scrolling-beispiele-423046/

https://www.sortlist.de/blog/parallax-scrolling/

Kontakt

Für Ihre Fragen, Anregungen und Anmerkungen haben wir immer ein offenes Ohr.

Sie können uns natürlich auch telefonisch erreichen:
034298 / 208 478

Erfahrungen & Bewertungen zu norules-webdesign