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.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung