Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Ein CSS3-Generator zum Verlieben: Hier kommt Bounce.js

Das Interface ist einfach zu bedienen. (Screenshot: bouncejs)

Wir lieben CSS3-Animationen. Allerdings können diese ganz schnell unübersichtlich in der Programmierung werden. Der Service Bouncejs.com bietet euch ein Interface, das ihr lieben werdet. Das „Warum“ findet ihr im Artikel.

Zugegeben, Generatoren sind meistens nichts für seriöse Entwickler: Schlechter Code und umständliche Bedienung sind nur einige Probleme von diesen Helfern. Neben CSS3-Verlauf-Generatoren gibt es jetzt aber ein weiteres Tool, das ich euch nicht vorenthalten möchte: Bouncejs.com.

Bounce.js: Es war noch nie so leicht mit Key-Frames umzugehen

bounce-js
Bounce.js bietet euch sogar Presets an. (Screenshot: bouncejs)

Mit sogenannten „Components“ könnt ihr eure Animation Schritt für Schritt aufbauen, oder ihr nutzt eines der vorgefertigen Templates und wandelt es ab. Mit einem Klick exportiert ihr eure Animation als CSS-Code – inklusive -vendor-Prefix.

Mit Bounce.js ist es sogar möglich, dass ihr eure Animationen an Kollegen oder Freunde weiterleitet, denn alle Animationsparameter werden in der URL gespeichert. Durch eine Zeitlupenfunktion läuft die Animation verlangsamt ab, während ihr euch die einzelnen „Components“ und ihre Auswirkungen live ansehen könnt. Das macht Bounce.js auch perfekt, um CSS3-Animationen besser verstehen zu können. Nach einem Export zu CSS könnt ihr die Animation weiterhin bearbeiten, denn die Parameter werden als Kommentar in der CSS-Datei mitgeliefert – ihr könnt somit jederzeit die Animation verändern, und das bequem über den Online-Service.

Bisher ist nur der Online-Service verfügbar

Der Name des Tools lässt vermuten, dass Bounce.js eine JavaScript-Bibliothek ist. Dem ist aber nicht so – zumindest jetzt noch nicht: Der Entwickler Joel Besada arbeitet stetig an Bounce.js, aber vorerst müsst ihr euch mit dem reinen Online-Service bouncejs.com zufrieden geben.

Vielleicht auch interessant: Ihr wollt Dropdown-Menüs mit CSS erstellen?? Hier findet ihr Tutorials und Demos, die euch weiterhelfen.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen