Parallax Scrolling setzt neue Maßstäbe im Web Design

Parallax Scrolling ist ein technisch innovativer Trend im Webdesign, der beim Nutzer einen 3D-ähnlichen Effekt auslöst und neue Maßstäbe in Sachen Interaktivität und Nutzerverhalten setzt.

Das versteht man unter Parallax Scrolling

Als Parallax Scrolling wird ein neuer Trend im Webdesign bezeichnet, der Websites mittels der Scrollfunktion steuerbar macht. Sobald der Nutzer nach unten scrollt, wird eine Bewegung der Elemente in unterschiedlichen Geschwindigkeiten ausgelöst.

Während sich das Hintergrundbild langsam verändert, können sich Bilder oder grafische Elemente im Vordergrund rascher bewegen. Damit entsteht der sogenannte Parallaxeneffekt, der dem Nutzer den Eindruck von Tiefe vermittelt. Grundsätzlich kann dieser Effekt mit einer 3D-Animation gleichgesetzt werden. Gerade im Storytelling wirkt das Parallax Scrolling sehr intensiv, da maßgebliche Inhalte dank der Scrolleffekte und unterschiedlicher Animationen deutlich in Szene gesetzt werden und beim User wesentlich eindringlicher in Erinnerung bleiben.

Funktionsweise von Parallax Scrolling

Wer Parallax Scrolling einsetzen möchte, der setzt auf die Wirkung der sogenannten Bewegungsparallaxe. Bewegt sich ein externer Beobachter parallel zu zwei anderen Objekten, entsteht bei Erstgenanntem der Eindruck, dass sich die Objekte unterschiedlich schnell bewegen. Während sich das Objekt, das ihm nähersteht, scheinbar schneller fortbewegt, scheint dies für das entlegenere Objekt umgekehrt der Fall zu sein.

Damit kommt ein wahrnehmungspsychologischer Effekt zum Tragen, der eine besondere Tiefenwahrnehmung entstehen lässt. Das hat damit zu tun, dass die Lichtreflexionen des näher liegenden Objekts rascher auf die Netzhaut treffen. Grundsätzlich verarbeitet das menschliche Gehirn in der Folge die Reize dann so, als ob sich der abgebildete Raum im 3D-Raum abspielt und dort auch wahrgenommen wird. Dieser Effekt ist vielen bereits aus der Geometrie und Astronomie, aber auch aus der Fotografie bekannt.

Wer gerne Videospiele nutzt, kommt ebenfalls in den Genuss des Parallax Scrolling. Denn dort wird der Effekt dazu genutzt, den 2D-Spielen mehr Tiefe zu verleihen und dem Spieler damit ein gewisses Maß an Orientierung zu vermitteln. im Wesentlichen geht es sowohl bei diesen Animationen als auch bei der Nutzung des Parallax Scrolling im Webdesign darum, dem User einen sogenannten Joy of Use zu vermitteln. Damit soll auch die Erinnerung an die Präsentation und die Wissensvermittlung entsprechend gestärkt werden.

Wie Bewegungsparallaxe bei Websites erzeugt werden

Es gibt unterschiedliche Formen und Möglichkeiten, wie Parallax Scrolling im Webdesign erzeugt werden kann. Grundsätzlich geht es darum, Hintergrundbilder und unterschiedliche Bildelemente im Vordergrund so einzusetzen, dass der Betrachter sich mittels der Scrollfunktion durch die szenischen Inhalte bewegen kann. Dies geschieht von einem Fixpunkt aus, der in der Fachsprache auch als Viewport bezeichnet wird. Von dort aus bewegen sich die einzelnen Elemente entweder langsamer oder schneller. Aufgrund der Bewegungen ploppen fixierte Elemente wie Texte oder Grafiken sowie Fade Outs und Fade Ins auf. Diese laden sich dank des HTML Reflows ständig selbstständig. Wie sich die meist animierten Elemente individuell anordnen, geht auf eine Dynamik in der Erscheinung der Inhalte zurück. Im Parallax Scrolling erlebt der Nutzer sämtliche Inhalte aufgrund der horizontalen Bewegung.

Was die Website selbst betrifft, so ist diese meist als Single Page Website oder sogar als OnePager konzipiert. Sämtliche Bestandteile wie Quellcode und Texte, aber auch Bilder und CSS sowie Scripte sind alle in einem Dokument zusammengefasst, das auch auf einem einzigen Server hinterlegt ist. Dank individueller Selektoren und CSS-Tags sowie einzelner Scriptaufrufe können die Effekte angesteuert werden. Auslöser dafür ist allerdings eine Scrollbewegung des Users. Werden viele Scripts oder aufwändig gestaltete Grafiken sowie hochauflösende Bilder für die Gestaltung einer Website verwendet, kann es zu langen Ladezeiten kommen. Deshalb ist es wichtig, dass gerade beim Parallax Srcolling die einzelnen Effekte sehr dezent eingesetzt werden oder aber ein schlanker Quellcode verwendet wird. Immerhin sollte die Verwendung des innovativen Trends immer Teil eines Gesamtkonzepts sein, dann kann er auch bei Multi-Pages Websites verwendet werden.

Anwendungsbereiche von Parallax Scrolling

Parallax Scrolling wirkt am effizientesten und eindrucksvollsten beim Storytelling. Dabei kommt es darauf an, dass die kompletten Inhalte so arrangiert werden, dass dem User am Ende eine Art Geschichte erzählt wird. Das Angebot an verfügbarer Information wird mit der technischen Darstellung der Inhalte perfekt kombiniert. Auch für die professionelle Darstellung von Freelancer Websites oder Online-Shops sowie für überzeugende Landingpages, die einen hohen Call-to-Action-Anteil aufweisen, eignet sich diese technische Innovation. Natürlich macht das Parallax Scrolling auch bei der Umsetzung kompletter Werbekampagnen oder bei Produktpräsentationen im Internet Sinn.

Wer auf Parallax Scrolling im Webdesign setzen möchte, sollte allerdings zu einer perfekten Darstellung und Präsentation der relevanten Informationen auf der Website auf unterschiedliche Faktoren setzen. Dazu gehört, dass es nur sehr zurückhaltend im Rahmen eines Flat-Designs zum Einsatz kommt. Wichtig ist zudem ein visuelles Storytelling, das beim Nutzer Spaß hervorruft und ihn zu einer Aktion motiviert. Um eine breite Anwendung zu gewährleisten, ist auf eine Abwärtskompatibilität zu achten. Vor allem aber sollten Anwender darauf achten, dass auch eine mobile Nutzung gewährleistet ist.