Parallax Scrolling ›› Definition & Bedeutung › ADVIDERA

Parallax Scrolling

Der englische Ausdruck Parallax Scrolling bezeichnet einen Effekt im Webdesign, der beim Scrollen mit dem Mauszeiger entsteht. Dabei werden verschiedene, übereinander liegende Ebenen, auf einer Webseite mit verschiedenen Geschwindigkeiten zueinander in Bewegung versetzt. Auf diesen Ebenen befinden sich Objekte wie Inhalte, Bilder oder Hintergründe. Dadurch werden ein dreidimensionales Erscheinungsbild der jeweiligen Webseite erzeugt und Bewegungen simuliert. Das Scrollen durch den Nutzer verleiht der Seite zudem mehr optische Tiefe und Räumlichkeit. Diese Technik basiert auf dem Prinzip der Bewegungsparallaxe, nach welcher sich ein Objekt mit einer bestimmten Geschwindigkeit in eine Richtung fortbewegt, während gleichzeitig ein weiteres Objekt mit einer anderen Geschwindigkeit in eine andere Richtung wandert.

Funktionsweise

Beim Parallax Scrolling wird auf die Bewegungsparallaxe zurückgegriffen, die sich auf unterschiedliche Weise herstellen lässt. Üblicherweise funktioniert der Effekt folgendermaßen: Sobald der Nutzer mithilfe der Scroll-Funktion die Seite betrachtet, bewegen sich parallel dazu Hintergrundbilder und vordergründige Bildelemente. Dabei bildet der Above the fold-Bereich den Fixpunkt. Von diesem Punkt ausgehend bewegen sich einzelne Elemente in unterschiedlichen Geschwindigkeiten durch Verwendung von Slides, Fade out, Fade in, Text und Grafiken, die durch den HTML Reflow kontinuierlich geladen werden. Auf diese Weise wird den Inhalten eine dynamische Erscheinung verliehen.

Aus wahrnehmungspsychologischer Sicht entsteht durch Parallax Scrolling beim Betrachten einer Website eine besondere Tiefenwahrnehmung. Hierbei treffen Lichtreflexionen naher Objekte schneller auf die Netzhaut eines Betrachters als die von weiter entfernten Objekten. Die ankommenden Reize werden vom menschlichen Gehirn so verarbeitet, dass der dargestellte Raum dreidimensional wahrgenommen wird. Voraussetzung für das Entstehen dieses Effekts ist, dass sich der Betrachter parallel zu den beobachteten Objekten fortbewegt. Daher spricht man in diesem Zusammenhang von einem bewegungsinduzierten Tiefenreiz. Wird der Kopf von rechts nach links bewegt, verändert sich im Sichtfeld des Betrachters die relative Position von Objekten. Dies äußert sich insofern, als nahe Objekte sich vor weiter entfernte Objekte „schieben“, die dadurch wiederum verdeckt werden. Im Vordergrund bewegen sich die Objekte augenscheinlich sehr schnell, im Hintergrund bewegen sich die Objekte nahezu gar nicht. Dieses Phänomen ist insbesondere bei Fahrten mit dem Zug oder Auto zu beobachten.

Webseiten, die Parallax Scrolling nutzen, sind häufig Single Page Websites oder OnePager. Das bedeutet, Quellcode, Texte, Bilder, CSS und Scripte sind in einem Dokument zusammengefasst. Mithilfe von Selektoren, CSS-Tags, HTML5 und Scriptaufrufen wird der Effekt auf der jeweiligen Webpräsenz umgesetzt. Je mehr Scripte, Grafiken und hochauflösende Bilder verwendet werden, desto länger ist die Ladezeit der Inhalte. Aus diesem Grund sind ein kurzer Quellcode und ein mäßiger Einsatz dieser Technik von Vorteil.

Anwendung von Parallax Scrolling

Am häufigsten wird Parallax Scrolling im Storytelling eingesetzt, um den Leser optisch anzusprechen. Hierbei erfolgt eine Kombination aus der besagten Webdesign-Technik und dem dargestellten Content. Mit dem daraus entstehenden visuellen Storytelling soll beim Nutzer ein gesteigertes Lesevergnügen erzeugt werden. Auch in der Gaming-Welt findet dieser Effekt Anwendung, um Spielern ein gesteigertes Spielvergnügen zu bereiten. Des Weiteren wird er häufig in der Geometrie, Astronomie und Fotografie einsetzt. Im Allgemeinen ist dieser Effekt auf OnePagern zu sehen, aber auch auf Multipages.

Grundsätzlich gilt es bei der Anwendung von Parallax Scrolling für die Darstellung von Inhalten auf Webseiten folgende Aspekte zu beachten:

  • minimalistischer Einsatz
  • Funktion als visuelles Storytelling
  • Freude statt Frust beim Nutzer
  • Begünstigung von Conversions
  • Abwärtskompatibilität und responsives Design für mobile Browser

Vor- und Nachteile von Parallax Scrolling im Online Marketing

Der Parallax-Effekt kann sowohl Vor- als auch Nachteile für das Online Marketing bedeuten. Als Nachteil hat sich gezeigt, dass die Anwendung mit einer erhöhten Ladezeit sowie einem Mehraufwand verbunden ist, damit dieser Effekt auch auf älteren Geräten und Browsern einwandfrei funktionieren und ästhetisch wirken kann. Der Anspruch auf allen Endgeräten der Nutzer durch ein responsives Design denselben positiven Effekt zu erzeugen, erfordert in der Umsetzung trotz vorhandener Frameworks einen hohen Aufwand. Zudem kann sich die erforderliche Größe der Bilder erheblich auf die Leistung einer Seite auswirken, insbesondere, wenn sie auf mobilen Geräten abgerufen wird. Im schlimmsten Fall kann eine Webseite gar nicht oder nur teilweise angezeigt werden, was dazu führen kann, dass der Nutzer nicht mehr auf die Website zurückkehrt. Wird der Effekt übermäßig eingesetzt, kann dies den Nutzer vom eigentlichen Content ablenken, was wiederum die Conversion-Rate negativ beeinflussen kann.

Auf den ersten Blick noch beeindruckt, kann der Effekt auf Nutzerseite auch für Desinteresse sorgen, sich weiterhin mit den Inhalten zu befassen. Möchte der Nutzer beispielsweise faktische Informationen zu einem bestimmten Thema erhalten, erweist sich eine starre Seite in manchen Fällen als effizienter. Auf diese Weise kann sich der Nutzer vollständig auf den Inhalt konzentrieren und gelangt schneller zu den gewünschten Informationen.

Da der Effekt überwiegend auf OnePagern eingesetzt wird, ergeben sich aus SEO-Sicht einige Nachteile. Dadurch, dass solche Seiten nur aus einer URL bestehen, können anders als Multipages nicht mehrere Keywords eingebettet werden. Auch in Bezug auf den keywordrelevanten Header-Title, die Meta Description sowie den Meta-Title erweist sich der Effekt auf OnePagern als negativ für das Ranking, da es nur eine einzige Seite zu optimieren gibt. Auch die Tatsache, dass OnePager häufig eine längere Ladezeit benötigen, kann grundsätzlich einen Abstieg im Google-Ranking bedeuten. Als suchmaschinenfreundlich gelten Inhalte, die sich beim Aufrufen der Seite „above the fold“ befinden. Bei OnePagern muss jedoch gescrollt werden, damit die Gesamtheit der Inhalte vom Nutzer erfasst werden können. Auf Mobilgeräten kann die verlängerte Ladezeit mitunter dafür sorgen, dass der Webseitenbesucher die Seite innerhalb kürzester Zeit wieder verlässt.

Als vorteilhaft hat sich dieser Effekt erwiesen, wenn es darum geht, Content zu gestalten, der durch seine visuelle Erscheinung leichter im Gedächtnis des Nutzers haften bleibt. Der Nutzer kann auf diese Weise im Hinblick auf seine jeweilige Suchintention schneller zufriedengestellt werden und kehrt womöglich erneut auf die Website zurück. Ein weiterer Vorteil ist die Möglichkeit, Bewegung in eine “starre” Seite zu bringen, ohne den Nutzer mit visuellen Reizen zu überfordern. Der Nutzer könnte dadurch ansonsten animiert werden, von der Website abzuspringen (Bounce).

Des Weiteren kann dieser Effekt auch dazu eingesetzt werden, den Nutzer zum Scrollen zu motivieren, damit sich dieser die gesamte Website anschaut. Dies kann zu einer längeren Verweildauer führen. Aus Sicht des Betreibers einer Website ist dies ein besonders effektiver Vorteil im E-Commerce, wenn der Nutzer schlussendlich ein Produkt erwirbt.

Quellen

Ihr Weg zu mehr Besuchern und Umsatz