Animation
Animationen sind heute Teil jeder guten Oberfläche, mal mehr und mal weniger subtil. Durch dezenten Einsatz von Animationen wird beim Nutzer eine einheitliche und angenehme Benutzererfahrung geliefert. Erst beim Fehlen solcher subtilen Animationen werden diese unangenehm bemerkt.
Alle modernen Webframeworks liefern Animationen von Haus aus mit. Seien es nun Buttons die sich drücken lassen, oder Schalter, die sich bewegen. Aber auch zoomende Inhalte, wie beispielsweise Bilder in einer Galerie. Gerne wird auch das Scrollen auf einer Seite automatisiert oder sogar umgelenkt.
Manchmal muss es aber etwas mehr sein. Vielleicht haben Sie spezielle Vorstellungen für Ihre Animation oder aber die Vorlage die Sie haben deckt Ihren speziellen Fall nicht ab. Dann kann unter Umständen ich Ihnen weiterhelfen. Ich kenne mich mit allen gängigen Animationsmethoden im WWW aus. Seien es CSS-Animation, Javascript gesteuert oder auch alleinstehend, aber auch komplexere, interaktive Grafiken wie SVG oder Canvas(html5).
Hier erstmal ein kleiner überblick über die gängigsten Methoden der Animation. Am Ende der Seite finden sie dann eine kleine Beispiel Auswahl von Animationen.
P.S. Natürlich sind sämtliche Grafiken und Animationen auf meiner Webseite von mir entwickelt und programmiert.
CSS
CSS Animationen sind heute auf jeder modernen Website zu finden. Der Einsatzbereich reicht dabei von subtilen Änderungen von Farbwerten bis zu zoomenden Fenstern. CSS Animationen werden von sehr vielen Browser unterstützt und darin liegt auch ihre Stärke. Wenn ihre alte Seite noch keine solche Animationen an, berate ich sie gerne wie ein Facelifting aussehen könnte.
JAVASCRIPT
Mit JavaScript zusammen bilden CSS Animationen starke Synergieen. Der Einsatz dieser beiden Techniken sind aus dem heutigen Netz nicht mehr wegzudenken und der Großteil aller Animationen im Netz beruht auf dem Zusammenspiel dieser beiden Größen. Aber auch SVG Grafiken können mit JavaScript zum leben erweckt werden. Auf dieser Website kommt die Animationsbibliothek “Greensock” zum Einsatz für die Animation der SVG Grafiken. Ansonsten setze ich auf den Einsatz von Pixi.js, Aos.js, velocity.js und selbst enwickeltem Code.
VIDEO
Es gibt verschiedene Möglichkeiten klassische Videos auf Ihrer Website einzubinden. Sie können von Ihrem eigenen Server streamen, oder von Youtube oder auch von anderen Streaming Plattformen im Netz.Dies ist eine einfach Möglichkeit lineare Inhalte wieder zu geben. Trotzdem gibt es beim Einsatz von Videos einige Stolpersteine zu beachten. So muss das Encoding und die Auflösung unter Umständen angepasst und das Video in das richtige Format gebracht werden. Auch die Einbindung muss technisch sauber erfolgen, damit die Videos bei jeder Auflösung sauber eingebettet sind. Vielleicht liebäugeln sie auch mit einem individuellen Player der auf Ihre CI angepasst ist? Ich kann Ihnen Helfen Ihre Videos ins richtige Format zu bringen und auf Ihrer Website bereitzustellen.
SVG
Skalierbare Vektor Grafiken oder kurz SVG sind ein modernes Format um Animationen auflösungsunabhängig auf Ihrer Website darzustellen. Das bedeutet, egal wie groß das darstellende Medium ist, sei es ein kleines Handy oder ein Desktoprechner oder sogar ein Riesiger Fernseher, die Qualität ist immer von höchster Güte. SVG lässt sich sehr gut animieren durch den Einsatz moderner JavaScript Bibliotheken. SVG Grafiken können auch interaktiv sein, dass heißt der Benutzer kann interagieren. Die meisten Grafiken auf dieser Seite sind im SVG Format.
CANVAS
Der sogenannte “Canvas” ist eine große digitale Leinwand auf der mit verschiedensten Möglichkeiten Grafiken erstellt werden können. Durch den Einsatz von JavaScript als Hauptwerkzeug bei der Bearbeitung des Canvas ergeben sich einige Vorteile gegenüber anderen Techniken. Zum einen sind sowohl einfache, lineare, aber auch komplexe und nicht-lineare Animtionen möglich. Das beste Beispiel für Letztere sind sogenannte Browsergames. Ich setze bei der anspruchsvollen Animation mit Canvas auf Pixi.js, GreenSock und natürlich Handarbeit für den letzten Schliff.
GIF
Manchmal muss es eben doch ein GIF sein. Seit ca. 1990 werden Bilder im Format GIF benutzt um Animationen darzustellen. Daraus folgt, dass wirklich jeder Browser ein animiertes GIF darstellen kann, die Kompatibilität ist also überragend. Im praktischen Einsatz animierter GIFs ist es leider nicht möglich mehr als 256 Farben zu benutzen. Allerdings kann durch den Einsatz speziell gewählter Paletten dieses Manko ausgeglichen werden. Dies geht leider nicht bei allen Motiven und nur bei einer sauberen Bearbeitung der Palette. Manchmal muss es eben ein GIF sein.