JavaScript
Schreibe einen Kommentar

jQuery Animation: Objekte dauerhaft rotieren lassen

CSS Transitions und CSS Animations sind ja schön und gut, haben aber einen entscheidenden Nachteil: Sie funktionieren nur in modernen Browsern! Wer da noch in Analytics eine nicht zu vernachlässigende Anzahl Zugriffe von Browsern hat, die CSS Transitions nicht unterstützen muss eben zusehen wie er Animationen auf eine Art umgesetzt bekommt, die auch in solchen älteren Browsern funktionieren. jQuery Rotation ist da eine Möglichkeit um Rotationen und Drehungen von HTML-Elementen umzusetzen.

Ich verwende hier in den Beispielen eine externe Library „jQueryRotate“ weil das jQuery übliche animate() ebenfalls auf CSS Transitionen setzt. Ung genau das wollen wir ja hier nicht!

Crumpet Beispiel nachgebaut

Fußball in „Kick-Abständen“ drehen lassen

Objekt langsam und konstant drehen

Die Geschwindigkeit lässt sich hier an zwei Schrauben drehen:

  1. angle+=1: Die Zahl stellt die Anzahl Grad um die das Objekt bei jedem Aufruf gedreht werden soll. Je kleiner, desto langsamer. Je größer, desto schneller, aber auch hakeliger!
  2. Besser ists die Zeit des Intervalls anzupassen: },20);. Die Zahl bestimmt die Dauer in Millisekunden bis zum nächsten Aufruf. 1 ist hier die kleinstmögliche Zahl. Wer es gern noch schneller haben will, muss zusätzlich am angle (siehe 1.) drehen.

Weitere Beispiele findet Ihr im jQueryRotate Wiki

Kategorie: JavaScript

von

Ich betreibe T-Shaped Marketing in zwei Online-Shops. Dazu gehört auch ständig neue technische Raffinessen in die Shops einzubauen. Ich bin ein leidenschaftlicher Philosoph, Tech and IT Blogger auf mizine.de. Mein #COFFEE is always #000000

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.