Die Geschichte von Web Animationen ist voller Missverständnisse…
Webanimationen haben Höhen und Tiefen erlebt. Als Flash-Animationen im Web populär wurden, schworen einige auf Flash und animierten ihre Webseiten intensiv. Doch schnell wurden Flash-Webseiten unbeliebt. Das Flash-Plugin erforderte häufige Updates, wies Sicherheitslücken auf und war von Anfang an für Mac-Geräte ausgeschlossen. Das Ergebnis: Flash ist mittlerweile fast verschwunden. Es wurde ruhiger, aber das Web erlebt nun ein Animations-Revival. Kaum eine Werbung kommt ohne Bewegung aus. Schließlich ist es nachgewiesen, dass bewegte Objekte unsere Aufmerksamkeit sofort erregen.
Welche Web Animationen gibt es denn?
Es gibt verschiedene Arten von Webanimationen, die zur Belebung von Websites eingesetzt werden können. Zu den gängigsten Animationstechniken gehören GIF-Bilder, HTML5 Canvas Elemente, eingebundene Videos, JavaScript Animationen, CSS3-Transitionen, Lottie-Animationen.
Animierte GIF Bilder
GIF-Bilder existieren bereits seit langem, seit 1987 bzw. 1989, als das animierte GIF von CompuServe entwickelt wurde. Es war die erste Möglichkeit, im Web bewegte Bilder bereitzustellen. Bald darauf entstanden GIF-Banner, bewegte Icons und Logos. Jedoch gerieten die Bilder aufgrund ihres übermäßigen Gebrauchs und des 90er-Jahre-Stils etwas in Vergessenheit.
In jüngerer Zeit erleben GIF-Bilder jedoch eine Art Wiederauferstehung, da die 90er Jahre wieder im Trend sind. Es gibt spezielle soziale Plattformen, auf denen GIF-Bilder ausgetauscht werden können.
Vorteile von GIF-Bildern:
- Plattformunabhängig: GIF-Bilder funktionieren auf allen gängigen Plattformen und Betriebssystemen, ohne dass zusätzliche Plugins oder Software erforderlich sind.
- Wiederholungs-Schleife: GIFs können als Endlosschleife erstellt werden, wodurch sich bestimmte Animationen wiederholt abspielen und die Aufmerksamkeit der Betrachter auf sich ziehen können.
- Geringe Dateigröße: Mit der richtigen Komprimierungstechnik können GIFs eine vergleichsweise geringe Dateigröße aufweisen, was zu schnellen Ladezeiten und einer effizienten Übertragung im Web führt.
- Einfache Integration: GIF-Bilder lassen sich problemlos in Webseiten, E-Mails und soziale Medien integrieren, da sie von den meisten Plattformen unterstützt werden.
Nachteile von GIF-Bildern:
- Eingeschränkte Farbpalette: GIFs unterstützen nur eine begrenzte Farbpalette von 256 Farben. Dadurch können sie in der Darstellung im Vergleich zu anderen Bildformaten, wie beispielsweise PNG oder JPEG, etwas eingeschränkt sein.
- Begrenzte Bildqualität: Aufgrund der begrenzten Farbpalette und der speziellen Komprimierungstechnik können GIFs im Vergleich zu anderen Bildformaten eine etwas niedrigere Bildqualität aufweisen.
- Kein Ton: GIF-Bilder sind stumm, d.h. sie können keinen Ton oder Audiodateien wiedergeben. Wenn eine Animation mit Ton erforderlich ist, müssen andere Techniken wie Videos verwendet werden.
- Komplexe Animationen: Für komplexe Animationen mit flüssigen Übergängen und Effekten sind GIFs möglicherweise nicht die beste Wahl, da sie aufgrund der begrenzten Farbpalette und Bildrate ihre Grenzen haben.
Links zu GIFs
Social Platform zu GIF gewidmet: www.giphy.com
TV mit lauter GIFs: www.gif.tv
Online Galerie: www.ani-gif.com
GIF Suchmaschine: www.gifcities.org
iPhone App: www.gifshop.tv
Videos auf der Webseite einbinden
Videos auf Webseiten einzubinden ist eine weitere Möglichkeit, die Aufmerksamkeit der Besucher zu gewinnen. Insbesondere Fullwidth-Background-Videos erfreuen sich großer Beliebtheit. Allerdings scheint dieser Trend bereits wieder abzunehmen. Derzeit (Stand: Dezember 2017) nutzen noch einige Unternehmen wie Wetransfer, AirBnB und verschiedene Mode-Labels solche Videos. Dennoch wird vermehrt auf Webvideos verzichtet, da sie eine große Datenmenge erfordern und nicht von allen Geräten problemlos wiedergegeben werden können. Vor allem webseitenunabhängige Projekte entscheiden sich bewusst gegen den Einsatz von Webvideos.
Was muss man bei Hintergrund Videos beachten
- Möglichst eine ruhige Sequenz / Keine Achterbahnfahrt
- Die empfohlenen Videoformate sind HD1080 oder HD720 mit einer Bildrate von 25 FPS
- So kurze Videosequenzen wie möglich (Datenmenge gering halten)
- Wenn möglich Video-Loops verwenden (z.B. 2-3 Sekunden in Endlosschlaufe)
Beispiel Wetransfer
Wetransfer integriert Video Sequenzen von 2 Sekunden. Diese werden geloopt (Endlosschlaufe). Idee: möglichst kleine Datenmenge, mit möglichst guter Qualität.
- Video Format: HD1080 / HD720 (Beispiel Wetransfer: 1422 x 800)
- 25 FPS
- Dauer: 00:03 Sekunden
- Dateigrösse: 1.82 MB
Links Video einbetten
- Video im Inhalt der Webseite Responsive einbetten: www.embedresponsively.com
CSS3 Transitions
CSS3 (Cascading Style Sheets Level3) wird seit dem Jahr 2000 weiter Entwickelt. Zu Beginn waren noch wenige Browser mit den neuen Styles kompatibel, doch unterdessen interpretieren die neusten Browser viele dieser CSS3 Eigenschaften.
Gerade der CSS-Transition-Stil bietet die Möglichkeit, HTML-Elemente zu animieren und unter Verwendung von CSS-Kenntnissen faszinierende Effekte zu erzeugen. Ich werde nicht ins Detail gehen, aber im Grunde funktioniert diese Technik folgendermaßen:
- Ein HTML-Objekt (wie ein Bild, Text oder Div) hat eine bestimmte Eigenschaft, zum Beispiel: width: 100px;
- Diese Eigenschaft ändert sich bei einer bestimmten Aktion, zum Beispiel: Wenn man mit der Maus über das Objekt fährt (hover),
dann wird die width auf 200px geändert. - Der CSS-Stil „Transition“ definiert nun den Übergang dieser Eigenschaft.
- Wichtige Aspekte dabei sind:
Delay: Die Zeitverzögerung, bis der Übergang startet.
Ease: Die Bequemlichkeit oder Trägheit des Übergangs (ein Objekt beschleunigt langsam und wird langsam abgebremst).)
Links zu CSS3 Animationen
Vorteile von CSS3 Transitions
- Einfache Implementierung: CSS3 Transitions lassen sich relativ einfach in Webseiten integrieren, da sie Teil des CSS-Standards sind.
- Leichtgewichtig: CSS3 Transitions benötigen keinen zusätzlichen JavaScript-Code, was die Dateigröße reduziert und die Ladezeit verbessert.
- Flüssige Animationen: CSS3 Transitions ermöglichen flüssige Übergänge und Animationen zwischen verschiedenen Zuständen eines HTML-Elements.
- Hardwarebeschleunigung: Moderne Browser nutzen die Hardwarebeschleunigung, um CSS3 Transitions reibungslos und effizient darzustellen.
- Interaktivität: Mit CSS3 Transitions können Benutzerinteraktionen wie Hover-Effekte oder Klickanimationen umgesetzt werden.
Nachteile von CSS3 Transitions
- Begrenzte Kontrolle: Im Vergleich zu JavaScript-basierten Animationen bieten CSS3 Transitions weniger Kontrolle über komplexe Animationen und Interaktionen.
- Kompatibilitätsprobleme: Ältere Browser und bestimmte Versionen einiger Browser unterstützen möglicherweise nicht alle CSS3-Transitionseigenschaften (Internet Explorer!).
- Eingeschränkte Funktionalität: CSS3 Transitions sind eher für einfache Animationen geeignet und stoßen an ihre Grenzen, wenn komplexe Effekte oder dynamische Animationen erforderlich sind.
- Begrenzte Timing-Optionen: CSS3 Transitions bieten begrenzte Timing-Funktionen und Kurvenarten im Vergleich zu JavaScript-basierten Animationstools.
JavaScript Animationen
JavaScript sind natürlich eine weitere Option, um Webseiten zu animieren. Mit JavaScript lässt sich natürlich sehr viel animieren, jedoch muss oft auf die Kompatibilität geachtet werden. Wenn auf Libraries (Bibiliotheken / bereitgestellte Code Funktionen) zurück gegriffen wird, kann es sein, dass untereinander Konflikte entstehen.
Oft hangen natürlich JavaScript Animationen mit CSS3 Style bzw. Transition zusammen. Es lassen sich jedoch auch reine JavaScript Animationen programmieren.
Bereits jQuery (eine der Basis JavaScript Code Bibliothek) bietet Funktionen um Web Objekte zu animieren. Es existiert die „.animate()“ Methode mit der man bereits viele Animationen umsetzen kann. jQuery animate()
Hier nenne ich einige nützliche JavaScript Libraries für Webseiten
HTML5 Canvas
HTML5 Canvas ist in etwa der Nachfolger von Flash. HTML5 Canvas ist ein offizielles HTML Element, das es ermöglicht, Grafiken, Animationen und interaktive Inhalte direkt in einer Webseite zu erstellen und anzuzeigen. Es dient als eine Art Zeichenfläche, auf der Entwickler mit JavaScript direkt auf die Webseite zeichnen können.
Mit HTML5 Canvas können komplexe und ansprechende visuelle Effekte erzeugt werden. Es ermöglicht die Manipulation von Formen, Linien, Bildern und Texten in Echtzeit. Durch die Kombination von Grafiken, Animationen und Interaktionen können beeindruckende visuelle Erlebnisse geschaffen werden.
Die Möglichkeiten von HTML5 Canvas sind vielfältig. Entwickler können Spiele, Diagramme, Datenvisualisierungen, Bildbearbeitungswerkzeuge, interaktive Infografiken und vieles mehr erstellen. Da Canvas auf Pixelbasis arbeitet, bietet es die Flexibilität, jede Art von visuellem Inhalt zu zeichnen und zu animieren.
Durch die Integration von JavaScript können Entwickler die Funktionen und Eigenschaften von Canvas nutzen, um Elemente zu bewegen, zu transformieren, zu animieren und auf Benutzerinteraktionen zu reagieren. Dadurch wird eine interaktive und dynamische Webseitenerfahrung ermöglicht.
Ein weiterer Vorteil von HTML5 Canvas besteht darin, dass es plattformunabhängig ist und auf verschiedenen Geräten und Bildschirmgrößen funktioniert. Es kann sowohl auf Desktop-Computern als auch auf mobilen Geräten verwendet werden und bietet eine hohe Leistungsfähigkeit.
Insgesamt bietet HTML5 Canvas eine leistungsstarke Möglichkeit, um interaktive und ansprechende Grafiken und Animationen direkt in eine Webseite zu integrieren und damit eine beeindruckende visuelle Darstellung zu erreichen.
Lottie Animationen
Lottie ist eine JavaScript Library, die es ermöglicht Vektorbasierte Elemente animiert anzuzeigen. Durch die Integration der Lottie-Bibliothek (Library) in eine Webseite und die Initialisierung der Grafiken im HTML-Code können diese Animationen angezeigt werden.
Die Lottie Objekte (JSON Datei) enthalten sozusagen eine animierte Vektorgrafik. Das heisst eine Vektorgrafik die sich über Zeit verändert.
Lottie bietet eine Vielzahl von Möglichkeiten, um Animationen interaktiv zu gestalten. Beispielsweise kann eine Animation abgespielt werden, wenn der Benutzer scrollt, oder der Ablauf der Animation kann durch die Position des Mauszeigers auf dem Zeitstrahl beeinflusst werden. Es ist auch möglich, Animationen bei bestimmten Benutzerinteraktionen, wie dem Hovern über ein Element, abzuspielen.
Beispiele:
- Wenn Benutzer scrollt, wird Animation abgespielt. Animation mit Scrollen synchronisieren (rauf/runter => vorwärts/rückwärts)
- Je nachdem wo sich der Mauszeiger befindet, wird entsprechend Animation auf Zeitstrahl abgespielt (zum Beispiel Links von Illustration: Anfang, Rechter Rand der Illustration: Ende)
- Animation wird bei „Hover“ abgespielt (Mauszeiger befindet sich auf Illustration).
Ein Vorteil von Lottie Animationen besteht darin, dass sie skalierbar sind und eine hohe Qualität beibehalten, da sie vektorbasiert sind. Darüber hinaus ermöglichen sie eine nahtlose Integration von Animationen in Webseiten und können eine attraktive visuelle Erfahrung bieten.
Es ist jedoch wichtig zu beachten, dass Lottie Animationen nicht direkt interaktiv sind und keine Spiele oder komplexe Interaktionen ermöglichen. Die Interaktionen des Benutzers können jedoch verwendet werden, um den Ablauf und das Verhalten der Animationen zu steuern.
Insgesamt sind Lottie Animationen eine leistungsstarke Möglichkeit, um Webseiten mit ansprechenden und interaktiven Animationen zu bereichern und eine dynamische visuelle Darstellung zu erreichen.
Für weiterführende Informationen und praktische Beispiele, sieht man sich am besten die Lottie Webseite und Beispiele an.
Bei Unklarheiten, melde dich ungeniert bei mir.
Weiterführende Links:
