Parallax Scrolling bezeichnet eine Scroll-Technik auf Webseiten. Wenn der Nutzer auf der Seite herunter scrollt, bewegen sich die einzelnen Elemente in unterschiedlicher Geschwindigkeit.
Beispielsweise bewegt sich das Hintergrundbild langsamer als der Text im Vordergrund.
Durch diesen Effekt entsteht beim Nutzer der Eindruck von Tiefe und die Seite wirkt wie eine Animation. Besonders eignet sich diese Technik, wenn es um Storytelling geht. Außerdem kann der Konsum von Inhalten kann durch die Scrolleffekte oder Animationen erleichtert werden.
Synonyme für Parallax Scrolling sind Parallax Website, Scrolling Website oder Parallax Webdesign.
Allgemeines
Parallax Scrolling arbeitet mit Bewegungsparallaxen. Wenn sich jemand parallel zu zwei Objekten bewegt, sieht es für ihn so aus, als ob sich die Objekte mit verschiedenen Geschwindigkeiten bewegen. Das Objekt, welches ihm näher ist, scheint sich immer schneller zu bewegen, als das weiter entfernte Objekt. Genau durch diesen Effekt entsteht die Tiefenwahrnehmung. Unser Gehirn verarbeitet die Reize so, dass die Website wie in 3D wahrgenommen wird.
Dieser Effekt wird schon länger bei Videospielen eingesetzt, um Tiefe zu erzeugen und damit der Spieler sich orientieren kann.
Im Webdesign wird der Parallax Effekt noch nicht so lange verwendet. Hier soll der Effekt dafür sorgen, dass Inhalte leichter aufgenommen werden können und die Website interaktiver ist.
Die Nutzer sollen sich an die Website erinnern und ihre Bedienung als „Joy of Use“ empfinden.
Funktionsweise
Den Effekt der Bewegungsparallaxe kann man auf unterschiedliche Weise erzeugen. Normalerweise werden Hintergrund und Elemente im Vordergrund so eingesetzt, dass sich der Nutzer mit der Scrollfunktion durch die Seite bewegt.
Der sichtbare Bereich der Seite ist der Fixpunkt für den Nutzer. Von diesem Fixpunkt ausgehend bewegt sich die Website, während sich die einzelnen Elemente bewegen.
Bewegungen kann man dabei durch Slides, Fade out / Fade in und fixierte Elemente erzeugen. Diese animierten Elemente auf der Parallaxe bewirkt, dass die Website dynamisch erscheint und der Nutzer die Inhalte nicht nur sieht, sondern auch erlebt.
Es ist jedoch empfehlenswert, die Effekte nur vereinzelt einzusetzen, da diese durch Scriptaufrufe gesteuert werden. Bei häufigem Einsatz von Scripten kann sich die Ladezeit der Inhalte verlängern.
Praxisbezug
Wie oben schon erwähnt, verwendet man beim Parallax oft Storytelling. Die Inhalte erzählen durch ihre Arrangement eine Geschichte, während der Nutzer herunter scrollt.
Online-Shops und andere Seiten mit viel Call To Action Bereichen nutzen häufig das Parallax Scrolling.
Es gibt jedoch einige Faktoren, die bezüglich des Webdesigns mit Parallax Scrolling beachtet werden sollten:
Es sollte minimalistisch eingesetzt werden
Es sollte als visuelles Storytelling dienen
Es sollte Spaß und Freude erzeugen und nicht Frust
Es sollte den Nutzer zu einer Aktion bewegen
Es sollte auch mit älteren Browsern kompatibel sein und auch mobil funktionieren
Wenn man diese Faktoren nicht beachtet, kann es auf der Seite zu Problemen kommen. Im Worst Case ist die Website hinterher nicht benutzbar. Man kann keine Informationen aufnehmen und das Ziel der kann man im Endeffekt trotzdem verfehlen. Zu viele Effekte können Frust hervorrufen und damit dem Image der Marke schädigen.
Darüber hinaus muss entschieden werden, mit welcher Methode das Parallax Scrolling umgesetzt werden soll. Zur Auswahl stehen: Darüber hinuas muss man entscheiden mit welcher Methode das Parallax Scrolling bestmöglich umgesetzt werden soll.
JavaScript
HTML5 und CSS3
Spezielle Plugins
jQuery
Als beste Methode gilt zur Zeit HTML 5 mit CSS3 Effekten und so wenig Skripten wie möglich.
Es ist aber vor allem zu bedenken, dass man Parallax Scrolling nur einsetzen sollte, wenn es auch vom Konzept her Sinn ergibt.
Quellen
https://www.techopedia.com/definition/29141/parallax-scrolling
https://de.ryte.com/wiki/Parallax_Scrolling
https://liechtenecker.at/parallaxes-scrolling/
