Funken-Effekt mit jQuery und rf.Sparks

Matt Kirman hat ein jQuery-Plugin geschrieben, welches eine Art Funken-Effekt erzeugt. Das Plugin erstellt eine Reihe von DIVs mit Bildern darin, die anschließend animiert werden und sich dementsprechend bewegen.

Alles was man dazu benötigt ist jQuery und das rf.Sparks Plugin, welches man bei GitHub in der aktuellen Version vorfinden kann.

[sourcecode language=”javascript”]$(‘#element’).sparks([
{
number: 10, // Anzahl der Funken
speed: 5, // Bewegungsgeschwindigkeit
img: ‘/img/sparks1.png’ // das transparente Bild
}
]);[/sourcecode]

Mit Hilfe der jQuery-Selector-Engine gibt man an, auf welches Element der Effekt erzeugt werden soll. Anschließend kann man die Anzahl und Geschwindigkeit der Funken festlegen und bestimmen, welches Bild als Funken genutzt werden soll.

Man kann beliebig viele verschiedene Bilder und Kombinationen verwenden. Bei zu vielen Funken ist allerdings mit einem heftigen Performancerückgang zu rechnen.

Demo

Download rf.Sparks Demo