Parallax Scrolling


Parallax Scrolling bezeichnet einen Trend im Webdesign. Websites mit Parallax Scrolling lassen sich mittels der Scrollfunktion steuern. Scrollt der Nutzer herunter, bewegen sich die Elemente der Website unterschiedlich schnell. Ein Hintergrundbild bewegt sich langsam, während Bilder oder Grafikelemente sich im Vordergrund schneller bewegen.

Durch diesen sogenannten "Parallaxeneffekt" entsteht beim Nutzer ein Eindruck von Tiefe – die Website erscheint wie eine 3D-Animation, die sich durch das Scrollen nach unten fortsetzt. Besonders geeignet ist dieses Bedienkonzept für das Storytelling, da der Konsum der Inhalte durch Scrolleffekte, Animationen und Einblendungen unterstützt werden kann. Synonyme Begriffe für das Parallax Scrolling im Webdesign sind Parallax Website, Scrolling Website sowie Parallax Webdesign.

Allgemeine Informationen zum Thema

Parallax Scrolling arbeitet mit der sogenannten Bewegungsparallaxe. Wenn ein Beobachter sich parallel zu zwei Objekten bewegt, erscheinen ihm die Objekte als ob sie sich mit verschiedenen Geschwindigkeiten bewegen. Das nähere Objekt scheint sich schneller zu bewegen, das weiter entfernte Objekt langsamer. Beim Beobachter entsteht durch diesen wahrnehmungspsychologischen Effekt eine besondere Tiefenwahrnehmung, da die Lichtreflexionen des nahen Objektes schneller auf die Netzhaut treffen. Das menschliche Gehirn verarbeitet diese Reize so, dass der abgebildete Raum wie in 3D wahrgenommen wird.[1]

Der Effekt der Bewegungsparallaxe ist relevant in der Geometrie, Astronomie, Fotografie und im Messwesen. Bei 2D-Videospielen wird die Parallaxe dazu benutzt, Tiefe zu erzeugen und dem Spieler Orientierung zu geben.[2] Seit einigen Jahren wird der Parallax-Scrolling-Effekt auch im Webdesign verwendet. Das Ziel besteht darin, die Aufnahme der präsentierten Informationen zu verbessern und die Nutzung der Website interaktiver zu gestalten. Nutzer sollen sich aufgrund der Präsentation an das Informationsangebot erinnern und die Bedienung der Website als “Joy of Use” empfinden.

ParallaxScrolling de en fr.png

Funktionsweise

Die Bewegungsparallaxe kann bei Websites auf verschiedene Arten erzeugt werden. In der Regel werden Hintergrundbilder und Bildelemente im Vordergrund so eingesetzt, dass sich der Betrachter mit der Scrollfunktion durch die Szenerie bewegt. Das Gesamtbild oder der sichtbare Above the fold- Bereich ist der Fixpunkt – auch Viewport genannt – für den Betrachter: Die Webseite bewegt sich gewissermaßen ausgehend von diesem Fixpunkt, während sich einzelne Elemente schneller und langsamer bewegen. Diese Bewegungen werden durch Slides, Fade out, Fade in und fixierte Elemente wie Text oder Grafiken hervorgerufen, die durch den sogenannten HTML Reflow ständig geladen werden. Die Anordnung der teilweise animierten Elemente auf der Bewegungsparallaxe hat eine dynamische Erscheinung der Inhalte zur Folge: Der Nutzer “erlebt” die Inhalte, weil sie sich horizontal bewegen.

Die Webseite selbst ist konzeptionell oft eine Single Page Website oder OnePager: Quellcode, Texte, Bilder, CSS und Scripte finden sich in einem Dokument, das auf einem Server hinterlegt ist. Mit Selektoren, CSS-Tags und Scriptaufrufen werden die Effekte angesteuert, nachdem sie durch eine Scrollbewegung durch den Nutzer initiiert worden sind. Bei vermehrtem Einsatz von Scripten, detailreichen Grafiken, hochauflösenden Bildern oder aufwändigem Rendering kann sich die Ladezeit der Inhalte verlängern. Deshalb sind ein dezenter Einsatz der Effekte und ein schlanker Quellcode empfehlenswert. Idealerweise ist das Parallax Scrolling Teil des gesamten Webseiten-Konzeptes, das bei gezieltem Einsatz auch eine Multi-Page-Website sein kann.

Praxisbezug

Der häufigste Anwendungsfall ist das Storytelling. Hier werden die Inhalte so arrangiert, dass eine Geschichte erzählt wird – während der Nutzer nach unten scrollt. Das Informationsangebot und die technische Darstellung der Inhalte werden kombiniert. Auch Freelancer Websites, Online-Shops, Landing Pages mit hohem Call to Action-Anteil, Websites für Produkteinführungen sowie Werbekampagnen nutzen die Vorteile des Parallax Scrolling beim Storytelling.

Aus Sicht des Webdesigns sind bei der Darstellung der Informationen mithilfe des Parallax Scrolling folgende Faktoren relevant:[3]

  • Parallax Scrolling sollte minimalistisch im Sinne eines Flat Designs eingesetzt werden.
  • Es sollte als visuelles Storytelling fungieren.
  • Es sollte Spaß beim Benutzer hervorrufen und keinen Frust.
  • Es sollte den Benutzer zu einer Aktion verleiten. Zum Beispiel eine Kontaktaufnahme oder die Bestellung eines Produktes.
  • Es sollte abwärtskompatibel mit älteren Browsern sein und auch auf mobilen Browsern ohne Probleme funktionieren.


Wenn diese Maßstäbe keine Rolle bei der Umsetzung einer Parallax Scrolling Website spielen, können auf der Seite des Endbenutzers erhebliche Probleme entstehen. Im schlimmsten Fall ist die Website unbenutzbar, die Informationen sind nicht aufnehmbar und sie verfehlt ihr Ziel. Zu viel technische Spielerei könnte zu frustrierten Nutzern führen und zudem Imageschäden nach sich ziehen.[4]

Eine weitere Schwierigkeit besteht darin, dass verschiedene Frameworks und Methoden bereit stehen, um Parallax Scrolling umzusetzen. Zum Beispiel:


Als “Königsweg” gilt HTML5 mit entsprechenden CSS3 Effekten und möglichst wenig Skripten zu kombinieren.[5]

Bedeutung für die Programmierung

Parallax Scrolling wurde als Trend gefeiert und kam bei vielen erfolgreichen Projekten zum Einsatz. Doch diese Webseiten waren speziell dafür ausgelegt. Wer Parallax Scrolling als Selbstzweck versteht, ist mit anderen Arten des Webdesigns wahrscheinlich besser beraten. Als Mittel zum Storytelling auf sogenannten “Onepagern” ist es indessen besonders gut geeignet – vor allem dann, wenn das Ziel der Website klar definiert ist und die Umsetzung des Projektes nach allen Regeln der Kunst erfolgt.[6]

Ähnlich wie bei OnePager-Websites sind unbedingt SEO- und Performance-Kriterien zu beachten: Es können lediglich die OnPage-Faktoren von einzelnen Seiten optimiert werden und die Breite an Keywords ist ebenfalls begrenzt. Interne Verlinkungen sind nur bedingt möglich und nicht alle Parallax Scrolling Websites sind responsiv und für mobile Endgeräte geeignet. Zwar kann Google mittlerweile mit JavaScript-Code relativ gut umgehen, aber die Text-to-Code-Ratio dürfte nicht besonders hoch sein.

Einzelnachweise

  1. ↑ Bewegungsparallaxe spektrum.de. Abgerufen am 19.01.2016
  2. ↑ Die Geschichte der Jump-and-runs gamersglobal.de. Abgerufen am 19.01.2016
  3. ↑ What Is Parallax Web Design? unleashed-technologies.com. Abgerufen am 19.01.2016
  4. ↑ Zur Hölle mit Parallax! praegnanz.de. Abgerufen am 19.01.2016
  5. ↑ Pure CSS Parallax Websites keithclark.co.uk. Abgerufen am 19.01.2016
  6. ↑ How The Web Design Trend of Parallax Scrolling Has Faded designyourway.net. Abgerufen am 19.01.2016

Weblinks


Abgerufen von „https://de.ryte.com/wiki/index.php?title=Parallax_Scrolling&oldid=19441“

Kategorie