Webdesign: Der Parallax-Effekt

Parallax-Effekt im Comicstrip von Peugeot

Webdesign: Der Parallax-Effekt

Der Parallax-Effekt (Parallax Scrolling) ist ein Gestaltungsmittel modernen Webdesigns. Sie werden ihn im Alltag des Survens schon oft begegnet sein, ohne ihn vielleicht beim Namen nennen zu können. Das soll sich nun ändern.

Was ist der Parallax-Effekt?

Mit der Parallax-Funktion ist es möglich, Objekte auf einer Website während des Scrollens in einer Scrollgeschwindigkeit „vorbeigleiten“ zu lassen, die sich von der Geschwindigkeit der übrigen Objekte unterscheidet. Dies lässt sich sogar soweit treiben, dass Sie auf einer Website von oben nach unten scrollen, sich ein Parallax-Objekt während dessen aber von unten nach oben über die Seite bewegt. Durch unterschiedliche Parallax-Einstellungen diverser Objekte ist es weiterhin möglich, diese in unterschiedlichen Geschwindigkeiten zu bewegen. Dies wird wiederum gerne dazu verwendet, der Website und dessen Darstellungen eine gewisse Tiefe zu verleihen. Denn wenn sich beispielsweise ein Hintergrundbild langsam bewegt und ein Objekt davor schneller, so ist dieser Effekt vergleichbar mit dem eines Naturgesetztes: Nehmen wir an, Sie fahren mit dem Auto auf einer Landstraße. Die Straßenpfosten und Bäume am Straßenrand flitzen in hohem Tempo an ihnen vorbei, die Häuser dahinter scheinen sich langsamer zu bewegen und die Berge dahinter kriechen nur so dahin.

Ein praktisches Beispiel des Parallax-Effekts bietet ihnen bereits die Startseite von André Morre Grafik-Design. Ungefähr in der Mitte der Seite befindet sich aktuell (Stand 2017) eine Parallax-Umsetzung mit dem Unternehmenslogo und auch die Bildbühne zu beginn wird mit dem Parallax-Effekt nach oben geschoben, wenn die Seite runtergescrollt wird.

Der Parallax-Efekt auf der Startseite des Internetauftritts von André Morre Grafik-Design

Ist der Parallax-Effekt noch hip?

Das Parallax Scrolling ist für Internetverhältnisse schon sehr, sehr alt. Bereits im Jahr 2008 kamen die ersten Webseiten auf, die die Bewegunsparallaxe als Stilmittel nutzten. Doch da der Effekt erst mit Einzug neuer Webtechnologien wie HTML5 und CSS3 möglich war ging es mit ihm nur langsam voran. Denn einige Browser, allen voran der Microsoft Internet Explorer, hinkten den Technologien noch lange hinterher und hatten sie nur unzureichend und unvollständig umgesetzt.

Erst 2012/2013 hatte Parallax Scrolling sich im Internet durchgesetzt mit einem stetigen Anstieg bis 2015. Seit dem kann man sagen, dass der Einsatz quasi stagniert. Auf der einen Seite ist er fast schon zum Standard einer neu aufgesetzten Website geworden, auf der anderen Seite wird auch immer häufiger bewusst darauf verzichtet. Einerseits, weil teilweise die Meinung herrscht, er sei zu oft und zu viel im Einsatz, andererseits, weil er sich nicht sonderlich gut mit Touchscreens verträgt.

Ohne enormen Aufwand, bei dem für jedes Betriebssystem und unterschiedliche Touchscreengrößen diverse Versionen des Parallax-Objekts bereitgestellt werden müssen, lässt sich der Effekt nicht auf Smartphones & Co. korrekt darstellen. Als Alternative gibt es dann nur noch die Möglichkeit, ihn auf diesen Geräten zu deaktivieren.

Pro & Contra Parallax

PRO

  • Sinnvoll und in Maßen eingesetzt wird der Parallax-Effekt nach wie vor beim Scrollen einen Aha-Effekt beim Betrachter auslösen.
  • Er sorgt für mehr „Tiefe“ in der Darstellung und stellt eine leichte Form der Animation dar

CONTRA

  • Problematisch auf Touchscreens wie Smartphone und Tablet
  • Von einigen Internetnutzern bereits leid gesehen
  • Unerfahrene Websurfer könnten von der Darstellung je nach Menge und Einsatz irritiert oder überfordert sein

 

Comic-Animation mit dem Parallax-Effekt

Unterhaltung mit dem Parallax-Effekt

Vor geraumer Zeit sorgte Peugeot mit einer Werbekampagne in der Szene für Aufmerksamkeit und gewann hierfür sogar diverse Preise. Der Parallax-Effekt wurde dabei verwendet, um eine Comicgeschichte zu erzählen. Auch hier nutzt der Effekt die leichte Form der Animation und die Erzeugung von Tiefe und Dreideminsionalität durch das Erzeugen unterschiedlicher Ebenen. Unterstützt wird das Ganze dabei noch von Soundeffekten, die im richtigen Augenblick zur Stelle sind. Und natürlich wurde für diese Kampagne der nötige Aufwand betrieben, dass er auf nahezu allen Touchscreens möglichst gut läuft. Insbesondere auf dem iPad mag dieses animierte Comic zu überzeugen.

Lassen Sie sich also zum Ende dieses Artikels etwas unterhalten und genießen Sie ein kurzes Comic der besonderen Art.

The Hybrid Graphic Novel

p.s.: Für mich hätte diese Form der Comicdarstellung sogar das Zeug dazu, dem guten alten Comic zu neuem Glanz zu verhelfen und neue Zielgruppen zu erschließen.

André Morre

Selbstständiger Grafik-Designer und Inhaber dieser Internetseiten.
Konzeption, Design, Webdesign, Text, Fotografie

3 Kommentare

  • meinetwegen

    Antworten 31. August 2017 14:28

    ich finde dass parallax scrolling immer noch eine coole sache ist. alledrings wird es oft eingesetzt, wo es keinen sinn macht. und es nervt wenn es überstrapapziert wird. bspw. 5 effekte auf einer seite.

  • Keimdrüse

    Antworten 3. September 2017 23:15

    Das Comic von Peugeot ist wirklich cool gemacht. Danke für den Link!

  • Volker

    Antworten 29. September 2017 0:43

    nutzte parallax scrolling auch auf meiner homepage. muss allerdings eingstehehn, dass der effekt auf dem smartphone nicht dargestellt wird. in sofern erstaunlich wie gut das comic von peugeot auf dem touchscreen funktioniert.

Kommentar verfassen