Flip! – jQuery Plugin

Ich möchte euch heute über den Tag verteilt kurz ein paar nette neue Plugins vorstellen.
Los geht´s mit Flip! einem jQuery Plugin welches euer Element in alle Richtungen drehen kann.

Das Plugin beitet verschiedene Optionen wie z.B. einstellen der Richtung, definieren der Start- und Endhintergrundfarbe bei der Animation, die Geschwindigkeit, aufruf von Funktionen am Start oder nach Abschluss der Animation usw.
Das Ganze läuft mit jQuery 1.3.1.

Eingebunden wird das ganze einfach so:

1

$("#flipBox").flip({ direction: 'tb', color: '#B34212', content:$("#myId") });

Eine Demo sowie alle Dateien zum Download findet ihr auf der offiziellen Website des Plugins.

GX – Javascript animations Framework auf jQuery

Riccardo Degni, dem ein oder anderen evtl. von moo.rd bekannt, hat ein neues, super schlankes (10kb), cross-browser fähiges animations-framework auf jQuery veröffentlicht.
Mit GX  lassen sich komplexe Animationen, mit allen W3C-konfromen CSS-Elementen erstellen.

GX soll nicht nur eine einfache Bibliothek zum erstellen von Animationen sein. Riccardo will mit GX weitergehn und es zu einem FULL-FEATURED-FRAMEWORK werden lassen mit welchem sich weiche-, benutzerdefinierte- und komplexe-Animationen mit easing erstellen lassen.

Wichtig waren Riccorado bei der Entwicklung zwei wesentliche Ziele:

• “Write Less, Do More” von jQuery. Mit GX soll man immer so wenige Code wie nur irgend möglich schreiben müssen um die besten Ergebnissen zu erzielen.
• “Don´t Repeat Yourself”. Sollte eine funktionalität von GX mehr als einmal gebraucht werden, wird diese intern wiederverwendet ohne diese zu duplizieren.

Das schöne an der ganzen Geschichte ist die Einfachkeit der Implementierung. Wo frühre versch. scriptfetzen nötig waren reichen jetzt ein paar einfache Zeilen aus um komplexe Animationen zu realisieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// simple animation
$('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'},
4000);
 
// queue animations
$('element').gx({width: 0}, 200)
            .gx({width: 200}, 4000)
            .gx({width: 0}, 'verySlow')
            .gx({width: 100}, 'slow');
 
// 'Complete' callback
$('element').gx({width: 200, height: 200}, 2000, 'Bounce', function(el) {
  el.html('The animation is completed!');
});
 
// 'Start' and 'Complete' callbacks
$('element').gx({width: 200, height: 200}, 2000, 'Bounce',
  {'start': function(el) { el.html('The animation is started!'); },
   'complete': function(el) { el.html('The animation is completed!'); } }
);

Weitere Informationen, Beispiele sowie die Doku finden sich auf der offiziellen Website.