Seite 4: Magic und weitere Alternativen

Inhaltsverzeichnis

Magic als Alternative

Animate.css wird hauptsächlich für kleinere Animationen verwendet. Bei komplexeren Anwendungen kann das noch recht neue Framework Magic eine gute Alternative sein. Dabei handelt es sich ebenfalls um eine einfache CSS-Bibliothek. Will man die Fähigkeiten von Magic allerdings ausreizen, kommt man nicht ohne den Einsatz von JavaScript aus. (Damit es nicht zu Missverständnissen kommt: Es geht natürlich auch ohne JavaScript, allerdings ist man dann auf das :hover-Event begrenzt.)

Magic unterteilt die zur Verfügung gestellten Effekte in Kategorien wie Bling, Static, Perspective, Rotate und Slide. Sie lassen sich auf einer Beispielseite des Projekts auf ein Grafikelement anwenden und so ausprobieren.

Mittlerweile hat Magic 55 verschiedene Effekte zu bieten, wobei in naher Zukunft weitere hinzukommen sollen. Sie reichen von einfachen statischen bis hin zu solchen, durch die sich die Perspektive auf ein Element verändert. Zugegebenermaßen hätte man sich die Demo-Webseite etwas spektakulärer gewünscht. Die doch sehr einfach daherkommende Beispiel-Anwendung ändert allerdings nichts daran, dass die verfügbaren Effekte durchaus gelungen sind.

Die Bibliothek – die übrigens unter der MIT-Lizenz angeboten wird und sich somit frei verwenden lässt – steht auf einer GitHub-Seite zum Download zur Verfügung. Um die Effekte nutzen zu können, muss man die Bibliothek zunächst wie folgt einbinden:

<link rel="stylesheet" href="css/magic.css">
 

Die Standardversion hat eine Größe von 96 KByte. In der minimierten Variante ist die Datei nur noch 77 KByte groß, weshalb man sie häufig für den Live-Betrieb wählt. Während der Entwicklungsphase des Projekts ist hingegen der Einsatz der normalen Datei empfehlenswert. So lässt sich rasch ein Blick auf die in der CSS-Datei definierten Effekte werfen, um beispielsweise zu verstehen, was im Hintergrund eigentlich passiert. Die meisten der Magic-Effekte sind tatsächlich nur in Kombination mit JavaScript sinnvoll. jQuery scheint dabei der eindeutige Favorit der Magic-Entwickler zu sein. Ein Beispiel:

$('.content').hover(function () {
  $(this).addClass('magictime puffIn');
});

Im Beispiel wird der Effekt puffInnach dem hover-Event mit jQuery ausgelöst. Die Klasse magictime legt letztlich die Dauer der Animation fest. Sie ist in magic.css beziehungsweise magic.min.css definiert.

.magictime {
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -ms-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
}

Standardmäßig ist in der Bibliothek eine Effektdauer von einer Sekunde vorgesehen. Bei einigen könnte die Länge tatsächlich etwas zu kurz geraten sein – in den Fällen lässt sich die Bibliotheksdatei entsprechend anpassen.

.magictime {
   -webkit-animation-duration: 3s;
   -moz-animation-duration: 3s;
   -ms-animation-duration: 3s;
   -o-animation-duration: 3s;
   animation-duration: 1s;
}

Die Zeitangaben müssen dabei übrigens nicht global definiert sein. Sie lassen sich tatsächlich auch individuell für einzelne Effekte verändern.

.magictime.magic {
   -webkit-animation-duration: 10s;
   -moz-animation-duration: 10s;
   -o-animation-duration: 10s;
   animation-duration: 10s;
}

Von Hause aus starten die Animationen sofort. Bei Bedarf lässt sich eine Verzögerungszeit definieren.

setTimeout(function(){
    $('.content').addClass('magictime puffIn');
}, 5000);

Mit dem obigen Codeausschnitt starten die Animationen nach fünf Sekunden.

Normalerweise laufen die Animationen exakt einmal. Alternativ dazu kann man sie aber auch in einer Endlosschleife abspielen lassen.

setInterval(function(){ 
   $('.content').toggleClass('magictime puffIn');
}, 3000 )

Aufgrund der – selbst in der minimierten Variante – recht umfangreichen Datei sollte man sich überlegen, ob man alle Effekte benötigt.

Leider gibt es für Magic kein spezielles Build-Tool. Sollen nur einige wenige Effekte genutzt werden, empfiehlt es sich, sie manuell in seine eigene CSS-Datei einzufügen. Bei einem Update der Bibliothek sind die Änderungen dann erneut durchzuführen.

Alternative Frameworks und Desktop-Software

Selbstverständlich sind die vorgestellten Projekte Animate.css und Magic nicht die einzigen Frameworks, mit denen sich CSS-Animationen umsetzen lassen. Der große Vorteil der beiden ist allerdings, dass sie bei Bedarf völlig ohne zusätzliches JavaScript auskommen. All diejenigen, die eine CSS-JavaScript-Kombination nicht stört, sei eine Übersichtsseite bei CodeGeekz empfohlen. Dort werden 15 Bibliotheken vorgestellt, auf deren Basis sich Animationen umsetzen lassen – dann allerdings meist unter Zuhilfenahme von JavaScript.

Es müssen allerdings nicht immer Skripte sein, auch Desktop-Software ist für Webanimationen zu finden. Eines der bekanntesten Tools dürfte dabei Adobe Edge Animate sein. Zwar ist es prinzipiell ein allgemeines Webdesign-Werkzeug, allerdings bietet es neben den "üblichen" Funktionen, die man von einem Programm dieser Kategorie erwarten darf, auch all das an, was für das Erstellen von CSS-Animationen nötig ist. Für die Realisierung der Animationen setzt Adobe Edge Animate auf ein auf jQuery basierendes Framework. Die gelieferten Ergebnisse sind in den aktuellen Versionen des Internet Explorer, Firefox, Safari und Chrome lauffähig. Abspielen lassen sie sich darüber hinaus aber auch auf Smartphones und Tablets mit Android, iOS und BlackBerry OS.