200907Nov

Émile: JavaScript-Framework für CSS-Animationen

Thomas Fuchs, Autor von Script.aculo.us und Scripty2, hat es geschafft, mit 50 Zeilen JavaScript ein kleines Framework für reine Animationen zu schreiben: Mit Émile lassen sich einfach und schnell CSS-Eigenschaften animieren, ohne dass dafür ein komplettes Framework benötigt wird. Die kleine Bibliothek ist darauf ausgelegt, Bewegungen auf eine Website zu bringen — dabei können die allgemein verfügbaren Attribute von DOM-Elementen verwendet werden.

Émile

Eine schöne Funktionalität stellt die Möglichkeit dar, Farbewerte (color oder background) zu animieren. Thomas Fuchs hat zudem in seinem Beispiel eine Easing-Funktion (Bounce) beigefügt.
Émile lässt sich sehr einfach nutzen und bietet sogar die Möglichkeit eines Callbacks (after), sobald eine Animation beendet wurde. Wer hauptsächlich Objekte mit einer ID animieren möchte, könnte beispielsweise diesen Code verwenden:

  • function $(id){
  • return document.getElementById(id);
  • }
  •  
  • $("element").onmouseover = function(){
  • emile(this, "background:#000000;", { duration: 200 });
  • }
  •  
  • $("element").onmouseout = function(){
  • emile(this, "background:#ff0000;", { duration: 500 });
  • }

Das Mini-Framework funktioniert in allen gängigen Browsern (Internet Explorer 6 und aufwärts, Firefox, Safari, Chrome, usw.) und befindet sich noch in einer experimentellen Phase. Erweiterte Effekte und Optionen bietet Scripty2, das mit einer Größe von 9 KB ebenfalls sehr kompakt ist.