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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

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