Für Freunde der grünen Laterne war Parallaxe bisher immer ein ganz schlimmer Bösewicht. Seit 2013 wird das Wort auch vermehrt vom Webdesign besetzt – und ist überhaupt nicht böse. Wer die Begriffe „Parallaxe“ und „Scrollytelling“ noch nicht kannte, darf sich auf einen „Kenn‘ ich. Ach so heißt das.„-Moment freuen.

Bild: OhSqueezy
Parallaktische Bewegung

Zunächst einmal für die Etymologen unter den Lesern: Parallaxe kommt aus dem Altgriechischen und bezeichnet in der Astronomie das Phänomen, dass sich ein feststehendes Objekt anscheinend bewegt, wenn die Position des Betrachters verändert wird. In der Kognitionspsychologie wird dieser Wahrnehmungseffekt auch Bewegungsparallaxe genannt – demonstriert an diesem kleinen GIF (s.rechts).

Das wichtigste Merkmal eines sogenannten Parallax Scrollings: Wenn sich verschiedene Elemente einer Sichtfläche (Website) unterschiedlich schnell bewegen, entsteht der Eindruck von Raum und Tiefe. Dieses Muster machen sich Designer schon seit Langem zunutze.

Klicken Sie auf den unteren Button, um den Inhalt von vine.co zu laden.

Inhalt laden

Altes Schema, immer wieder schön

Computerspiele nutzen dieses Prinzip schon seit den ersten Jump-And-Run-Spielen, die wir bereits aus der pixeligen 2D Arcade-Ära kennen. In den neunziger Jahren, als Flash noch neu und cool war, wurden kleine Cartoons und ganze Websites auf Basis dieser Technik realisiert.

Ebenso ist diese Methode von den sogenannten Legetrick-Filmen bekannt, einer uralten Ästhetik, die bei Southpark oder Monty-Python zur Anwendung kommt. Durch neue Tools wie Vine-Minivideos erleben solche alten Techniken eine schöne Renaissance (siehe links).

So viel/wenig Background-Informationen sollten ausreichen, das potentielle Anwendungsspektrum des parallaktischen Bewegungsprinzips abzuschätzen. 2013 kam es nämlich zu einer Revitalisierung dieser Methode, als man entdeckte, für welchen Zweck sich die Parallaxe noch eignet.

Parallactic Scrolling

Nachdem für den Journalisten durch Storytelling das Geschichtenerzählen wieder neu erfunden wurde, hat man nun das Parallaxe-Scrolling als ideale visuelle Darstellungsform entdeckt. Das ist vielleicht auch den seit einigen Jahren sehr beliebten Infografiken zu verdanken. Hier wird der vertikal abwärtsgerichtete Informationsverlauf in der Regel als hilfreich wahrgenommen.

Mit der Infografik im Hinterkopf haben wir dann auch schon den richtigen Ansatz: Den Geschichtsverlauf des Contents mit dem Bewegungsverlauf der Website zu koppeln. Meist bilden feststehende Elemente, beispielsweise ein kleines Navigations-Element, eine Art strukturellen Rahmen.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

 Scrollytelling

Mittlerweile wird vom Storytelling via parallaktischem Scrolling (Scrollytelling) als Königsdisziplin des Multimedia-Journalismus gesprochen. Das beschränkt sich aber nicht nur auf journalistische Inhalte. Wie die Beispiele im Video (siehe unten) zeigen, ist es ein guter Transporter für jede Information, die mit zusätzlichem Content unterfüttern werden soll.

Ein wichtiger Hinweis: Auch wenn das Scrolling der Touchscreen-Haptik von Wischbewegungen entgegen kommt, sind solche Seiten nicht zwingend etwas für die mobile Kommunikation. Die Frage der technischen Umsetzung (Html5, Flash, etc.) macht viele parallaktische Auftritte zu Preload-Monstern. Dazu kommt, dass gerne auch Filmsequenzen als Hintergrund genutzt oder interaktive Elemente eingefügt werden.

Es bleibt also die Faustregel: Das richtige Layout für den passenden Content.

Beispielsammlungen für Parallactic Scrolling Seiten:
12 examples of parallax scroll effect in Web Design
10 Awesome Sites Using Parallax Design
15 horizontal sites and the case for making them
YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Diese Beiträge könnten sie auch interessieren:

>>>Facebook schaltet Einbetten-Funktion für alle öffentlichen Postings frei
>>>Somebody – Eine App wird zur Gesellschaftskritik
>>>Ice Bucket Challenge – die Charity-Aktion mit Spaß-Charakter erreicht Obama

 Parallax-Scrolling GIF: OhSqueezy (Lizensbestimmung: Creative Commons CC-BY-SA)

Artikelbild: Screenshot ala.ch/

Blog Netzwelt

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert