Neue Tools: Bewegung auf der Website mit und ohne Javascript

Die beiden Animationswerkzeuge, die ich dir heute vorstellen möchte, sind keine von der 0815-Sorte. Es handelt sich nicht um Animations-Generalisten, sondern Spezialisten für kleine Anwendungsfelder. Das Javascript Granim.js erlaubt es dir, Animationen mit Farbverläufen zu kreiieren, während sich Radiobox.css ausschließlich um das Aussehen deiner Radiobuttons kümmert.

Granim.js: Einfache Verlaufsanimationen mit großer Wirkung

Granim.js ist ein frisches Javascript aus der Feder des Pariser Entwicklers Benjamin Blonde. Mit der Hilfe dieses sehr kleinen Scripts animierst du Verläufe in, auf und um alles herum, was sich in einem Canvas-Element darstellen lässt.

Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)

Die Verwendung ist einfach:

Nachdem das Javascript nur knappe 10kb auf die Waage bringt, ist der Overhead wohl zu vernachlässigen. Es rechtfertigt sich damit auch ein Einsatz kleinsten Umfangs, etwa um das eigene Seitenlogo mit einem Farbverlauf zu animieren, so wie du es auf der Demoseite zum Projekt anschauen kannst. Achte auf den Schriftzug Granim.js oben links.

Wobei dir dieses Beispiel auch gleich zeigt, dass das Javascript nicht bloß einfache Verläufe anlegen kann, sondern ebenso in der Lage ist, mit Bildmasken zu arbeiten. Verläufe lassen sich per Klick oder generell per Event anstoßen, was insbesondere diese Seite eindrücklich zeigt. Beweg die Maus einfach mal über die Ghost-Buttons und du wirst sicherlich schnell Spaß an Granim.js finden.

Das Script steht auf Github zum freien Download zur Verfügung. Es ist mit der sehr liberalen MIT-Lizenz versehen, so dass du es auch in kommerziellen Projekten, also auf Kundenwebsites, zum Einsatz bringen kannst.

Radiobox.css: Animierte Optionsauswahl

Aus dem Hause 720kb stammt eine kleine Sammlung von CSS-Animationen, die deine Radiobuttons von Langeweile befreien sollen. Insgesamt 12 Variationen stehen bereit. Der Effekt tritt jeweils in Kraft, wenn der entsprechende Radiobutton geklickt wird. Je nach Effekt fängt der Button dann an zu hüpfen, dreht sich, wird größer und so weiter.

Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)

Probier es einfach mal aus. Radiobox.css bietet auf jeden Fall interessante Effekte für eine Schaltfläche, die ansonsten eher unbeachtet bleibt. Radiobox.css kommt allein mit CSS3 aus, benötigt aber natürlich einen modernen Browser, um zu funktionieren.

Die Verwendung ist sehr einfach. Du fügst deinem Radiobutton einfach diejenige Klasse zu, die dem gewünschten Effekt entspricht, z.B.:

<input type="radio" class="radiobox-boing"/>

Radiobox.css kommt, wie das bereits vorgestellte Granim.js, unter der MIT-Lizenz ins Haus und kann dementsprechend auch kommerziell genutzt werden. Lade es über Github runter.