Konzept

Diese Website ist als Teil einer Bachelor-Arbeit im Fach Grafik-Design entstanden. In ihr wollte ich erforschen, wie ein Online-Portfolio aussehen könnte, das die Möglichkeiten digitaler Medien tatsächlich nutzt. Statt also nur eine Galerie statischer Bilder zu präsentieren, die ein Besucher/eine Besucherin mehr oder weniger passiv zu rezipieren hat, sollten die Grafiken zum Leben erweckt werden.

Drei Ebenen Allerdings wollte ich aufdringlich blinkende, nervöse Animationen, wie wir sie aus den schlimmsten Zeiten der Flash-Werbebanner oder entsprechender GIFs kennen, unbedingt vermeiden. Bei meinem Portfolio sollte die Bewegung tatsächlich dazu beitragen, jedes Bild intensiver erfahren zu können. Die Animation sollte genutzt werden, um mittels Bewegung eine räumliche Wirkung zu erzielen. Zudem sollte jeder Benutzer/jede Benutzerin Gelegenheit bekommen, diese Animation interaktiv steuern zu können – zwar mit nur wenigen Steuerungsmöglichkeiten, doch sollten diese genügen, um den Raum tatsächlich erfahrbar zu machen. Aus der Bildbetrachtung sollte so eine Bildbegehung werden.
Diese Möglichkeit kann nur ein digitales Portfolio bieten, weshalb auch alle animierten Grafiken, die hier präsentiert werden, tatsächlich mehr sind als ein paar statische Bilder, denen die Animation und Interaktionsmöglichkeit bloß hinzugefügt wurde. Vielmehr sind sie durch diese Transformation zu etwas anderem geworden: statt eines gefrorenen Augenblicks in Raum und Zeit lassen sie nun zu Möglichkeitsräumen geworden. Es gibt nicht mehr das eine, einmal festgelegte Originalbild. Es gibt nur eine Ansammlung an Variationen. Und das ist tatsächlich etwa qualitativ anderes als nur ein Bild + Bewegung.

Technik

Was die technische Umsetzung angeht, so boten sich im Rahmen einer Website sowohl Animationen mit JavaScript als auch mit CSS an. Allerdings neigen erstere dazu, viel Arbeitsspeicher zu verbrauchen und damit eine flüssige Bewegung zu erschweren. Besser geeignet schien die Animation mittels CSS.
Computer Dazu wurde jedes zu präsentierende Bild in mehrere – meistens drei - Ebenen aufteilen, welche dann der räumlichen Anordnung gemäß übereinandergelegt wurden. Diese Ebenen konnten nun mittels CSS transformiert werden, um so all die Wahrnehmungseffekte zu nutzen, welche die Illusion von Dreidimensionalität erzeugen können. Bewegung ließ sich dabei vor allem durch das Verschieben der Ebenen gegeneinander erzielen – also dem klassischen Parallax-Effekt. Wenn dabei zugleich die Größe einer oder mehrerer Ebenen verändert wurde, konnte tatsächlich mit einfachen Mitteln eine Kamerafahrt simuliert werden, welche den räumlichen Effekt noch verstärkt.
Auch andere Transformationen – der Helligkeit, Farbe, Durchsichtigkeit, Verzerrung, Drehung – wären mittels CSS-Filtern möglich, stoßen aber auch an Grenzen.

Zunächst wurde vor allem mit dem Verschieben und Vergrößern/Verkleinern einzelner Ebenen gearbeitet. Die Ortsveränderung wurde erreicht, indem eine absolut positionierte Ebene entweder mittels der Eigenschaften top, right, bottom, left oder margin-top, margin-right, margin-bottom, margin-left verschoben wurde. Dabei wurde jeweils nur der Anfangs- und der Endwert der Bewegung bestimmt. Mittels der allgemeinen Abgabe transition: 2s wurde festgelegt, dass es eine zwei-sekündige Übergangszeit geben solle, während der sich die Elemente gradlinig vom Anfangs- zum Endzustand hin verändern sollten. Tatsächlich funktionierte dies grundsätzlich gut, führte allerdings in vielen Fällen auch zu störenden Stockungen und Ruckelbewegungen.
Eine Internetrecherche brachte hier Klarheit: Denn während der grundsätzliche Ansatz, die Transition-Eigenschaft zu nutzen, durchaus korrekt war, so waren die verwendeten CSS-Eigenschaften (top, margin-top, etc.) eher ungeeignet. Tatsächlich bewirken diese, dass das Bild in jedem Zwischenschritt wieder neu gerendert werden muss, was viel Prozessorlast erzeugt und damit du einer stockenden Darstellung führt. Stattdessen sollte die CSS-Eigenschaft transform genutzt werden. Diese rendert das Bild tatsächlich nur beim ersten Ladevorgang, um es dann gemäß den genaueren Angaben zu verformen und zu verscheiden. Die Anweisung transform: translateX(10%) bewirkt beispielsweise, dass das Element um 10 Prozent auf der X-Achse verschoben wird. Entsprechende Änderungen des Codes führten schnell zu deutlich flüssigeren Bewegungen.
Der Umstand, dass ein permanentes Neu-Rendern der Grafik vermieden werden sollte, führt allerdings noch zu weiteren Einschränkungen. So ist es zwar theoretisch möglich, auch Eigenschaften wie Helligkeit, Farbsättigung und Deckkraft mittels CSS-Filtern zu steuern, doch führt dies ebenfalls zu einer dauernden Neuberechnung des Bildes und verhindert flüssige Übergänge.
So zeigten die ersten Versuche bereits, dass sich die CSS-Animation nach Möglichkeit auf Verschiebungen, Verformungen und Größenänderungen konzentrieren sollte. Dies dürfte aber, nach allen theoretischen Vorüberlegungen, vollends ausreichen, um einen effektive dreidimensionale Bewegungsillusion zu kreieren.
Das Ergebnis ist hier zu betrachten – hoffentlich zur vollen Zufriedenheit.
<
>