Animate.css Helper
Ein kompaktes Hilfs-Plugin für jQuery, welches das dynamische Auslösen von CSS-Animationen an mittels jQuery selektierten DOM-Elementen ermöglicht.
Projektbeschreibung
Dieses Plugin übernimmt das korrekte Zuweisen der Animationen mit den entsprechenden Zusatzeinstellungen wie Animationsdauer, Anzahl der Wiederholungen und Verzögerung der Auslösezeit. Dabei achtet es darauf, eventuell vorhandene Inline-Styles vor der Zuweisung zu sichern und am Ende der Animation wiederherzustellen. Darüber hinaus bietet es noch die Möglichkeit, eine Callback-Funktion zu übergeben, die dann am Ende der Animation aufgerufen wird.
Implementierung und Nutzung
Beispiel-Aufruf
$(window).load(function(){
$('.zoom-in-on-page-load.initially-hidden').removeClass('initially-hidden').applyAnimation({
type: 'zoomIn',
duration: 0.64,
delay: 0.2,
loops: 3,
callback: function(a, b){ console.log('Animation: "' + a + '" executed ' + b + ' times.'); },
callback_params: ['zoomIn', 3]
});
});
Optionen:
-
Parameter: type
Erwartet: String
Standardwert: "pulse"
Beschreibung:
Definiert die Art der abzuspielenden Animation anhand des dazugehörigen CSS-Klassennamens bzw. des Keyframe-Animationsnamens (in Animate.css sind diese immer gleich). -
Parameter: duration
Erwartet: Number / String / Void
Standardwert: null
Beschreibung:
Definiert, wie lange die Animation für einen Durchlauf benötigt. Hier nichts anzugeben bewirkt dass die STandardgeschwindigkeit, die durch Animate.css vorgegeben ist, genommen wird. Numerische Werte werden immer als Sekunden interpretiert, es empfielt sich also Fließkommazahlen zu nutzen um die Zeiten präzise genug angeben zu können. Alternativ kann aber auch ein String wie z.B. "240ms" übergeben werden. -
Parameter: delay
Erwartet: Number / String / Void
Standardwert: null
Beschreibung:
Definiert, wie lange der Browser den Beginn der Animation nach dem Aufruf der Funktion herauszögert. Hier nichts anzugeben bewirkt den sofortigen Start der Animation. Numerische Werte werden immer als Sekunden interpretiert, es empfielt sich also Fließkommazahlen zu nutzen um die Zeiten präzise genug angeben zu können. Alternativ kann aber auch ein String wie z.B. "240ms" übergeben werden. -
Parameter: loops
Erwartet: Integer / Void
Standardwert: null
Beschreibung:
Definiert, wie oft sich die Animation nach einem vollständigen Durchlauf wiederholt, bevor sie endgültig stoppt. Hier nichts anzugeben bewirkt dass die Animation nur ein einziges Mal durchläuft. -
Parameter: callback
Erwartet: Function / Void
Standardwert: null
Beschreibung:
Eine Callback-Funktion kann übergeben werden und wird dann aufgerufen, wenn die Animation beendet ist. -
Parameter: callback_params
Erwartet: Array / Void
Standardwert: null
Beschreibung:
Benötigt die übergebene Funktion bestimmte Parameter, so müssen diese hier angegeben werden und zwar immer als Array, andere Datenkonstrukte werden hier nicht akzeptiert und führen zu einem Fehler.