Warp drive jQuery plugin

Wieder ein neues jQuery Plugin. Die Idee kam mir beim refaktorieren eines Header Experiments, das ich so auch bereits bei CodePen veröffentlicht hatte. Die Idee ist einfach. Jeder sollte die Möglichkeit bekommen so ein Sternenfeld, bzw. Warp drive in seine Seite einbinden zu können. Sei es als Seitenhintergrund oder als interaktive Animation unter einem Div.
Und so entstand dieses jQuery Plugin. Im Gegensatz zu der alten Version auf CodePen habe ich für das Plugin einige Optimierungen umgesetzt. So kann man jetzt unter anderem Farben auswählen und Geschwindigkeiten anpassen. Dazu gibt es einen autoResize-Modus und zahlreiche Parameter über die sich das Plugin individualisieren lässt.
Ich gehe an dieser Stelle nur sehr kurz auf die Technik ein.
Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 4 KB im Zip-Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke.
Wie bei meinen anderen jQuery Plugins könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden.
Ich zeige euch erst ein paar Beispiele (Zu jedem Beispiel könnt ihr euch den Code anschauen). Danach gibt es die Download Links und die Links zum GitHub Repository, wo es zusätzlich zu den Beispielen weitere Links und Erklärungen gibt, wie ihr den Effekt einbinden und mit optionalen Parametern individualisieren könnt.

Beispiel 1:
view source

Beispiel 2:
view source

Beispiel 3:
view source

Beispiel 4:
view source

Beispiel 5:
view source

Beispiel 6:


Downloads
 
Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die jquery.warpdrive.min.js, wie hier in den Beispielen verwendet. Die jquery.warpdrive.js, falls ihr am Code interessiert seid und die jquery.warpdrive.min.js.zip als Zip.



GitHub

Und hier geht´s zum GitHub Repository. Hier findet ihr immer die aktuelle Version und weitere Tutorials sowie Links.
Wie immer gilt: Falls ihr Fragen oder Anregungen habt, dann hinterlasst einfach einen Kommentar oder schreibt mich an.