Vorheriger Artikel Nächster Artikel

Transit: CSS-Transitions und -Transformationen für jQuery

Mit Transit sollen deutlich bessere Ergebnisse als mit der normalen Animate-Funktion von möglich sein. Die Bibliothek unterstützt 2D- und 3D-Transformationen, bringt einige Easing-Methoden und noch weitere nützliche Features mit.

Transit: CSS-Transitions und -Transformationen für jQuery

transit_css3_animationen

Transit ist eine super-flüssige CSS-Transition und -Transformations-Bibliothek für jQuery mit der Transitions auf so ziemlich jede Eigenschaft des Elements angewandt werden können. Die Bedienung erfolgt über die von jQuery bekannte Syntax.

$("div").transition({ x: 200 });

Das Element wird mit den jQuery-Selektoren angesprochen. Die Funktion transition() mit mit den entsprechenden Transformations-Parametern erledigt den Rest.

Durch den Einsatz von laufen die Animationen deutlich flüssiger ab als mit der .animate()-Funktion von jQuery. Mit dem Plugin sind verschiedene 2D- und 3D-Animationen für Webseiten-Elemente möglich. Darunter Verschieben, Drehen, Skalieren und Neigen. Für einen natürlicheren Übergang stellt Transit außerdem unterschiedliche Easing-Methoden zur Verfügung und auch die Möglichkeit, eigene Transitions zu definieren.

Transit vs. CSS

Der Vorteil der Bibliothek gegenüber der Einbindung der Transformationen in den CSS-Code ist, dass du dir keine Gedanken über Browser-Prefixes und die dazugehörigen Schreibweisen machen musst, den CSS-Code sauberer halten kannst und mit der bekannten jQuery-Syntax deutlich einfacher komplexere Animationen mit dem Einsatz von Variablen entwickeln kannst.

Transit unterstützt Firefox 4+, Safari 5+, Chrome 10+, Opera 11+ und den Internet Explorer 10+. Außerdem funktioniert das Plugin mit dem mobilen Safari ab iOS4. Für ältere Browser stellt Transit leider keine Fallbacks zur Verfügung, sodass nur noch minimale Veränderungen ohne jegliche Animation möglich werden. Zur Lösung dieses Problems kann aber wieder auf die .animate()-Funktion von jQuery zurückgegriffen werden.

Mehr über das unter MIT-Lizenz stehende Plugin erfährst du auf der offiziellen Seite von Transit.

Weiterführende Links

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von marc.tissler am 31.05.2013 (09:10 Uhr)

    Für mein aktuelles Projekt evtl. zu gebrauchen, wenn man aber für einen Kunden eine große Website machen soll ist es ohne Fallbacks wenig zu gebrauchen. Alles 2 mal implementieren... evtl. könnte man ja das plugin selber ändern damit es automatisch zur animation wechsel.

    Was mich aber im vergelich zu CSS transitions stört, ist das man offensichtlich die "zurück animation" ebenfalls von hand erstellen muss.

    Antworten Teilen
  2. von Tiziano am 31.05.2013 (09:52 Uhr)

    Sehr gutes Plugin! v.a. die 3D Rotationen gefallen mir echt gut. So was gabs mit animate() bisher nicht.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Gradify: Skalierbare CSS-Platzhalter für dein Web-Projekt
Gradify: Skalierbare CSS-Platzhalter für dein Web-Projekt

Ihr kennt das: Die Bilder für eine Website sind noch nicht fertig geladen, und dadurch sieht das Projekt einfach nicht gut aus. Gerade in Zeiten des mobilen Internets ein Ärgernis. » weiterlesen

Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus
Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus

Bootstrap 3 von Twitter bietet eine ausgezeichnete Grundlage für die Webentwicklung. Wir stellen euch zehn Tools und Erweiterungen vor, mit denen ihr noch mehr aus der aktuellen Version rausholt. » weiterlesen

Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n 40 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen