CSS Animation triggern

CSS Animation triggern

animate-css

Einige werden sicher schon mit CSS3 Animationen gearbeitet haben, und dabei auf die fantastische animate.css Bibliothek gestoßen sein, mit der sich tolle Animationen, leicht in Projekte einbauen lassen. Ich nutze die Bibliothek gerne dafür, User auf bestimmte Elemente aufmerksam zu machen. Mit bedacht eingesetzt eine wirklich nette Sache. Nur leider mit einem kleinen Nachteil. Die Animationen laden sofort, beim laden der Seite.

Also habe ich mich dran gemacht, eine kleine Erweiterung zu schreiben, mit deren Hilfe (und der Hilfe eines zusätzlichen Skripts) kann man jetzt die Animationen beim erscheinen im Viewport feuern und die Dauer sowie die Verzögerung beim Start steuern.

Mit meinem Skript animate.js und dem onScreen Plugin stehen alle neuen Funktionen zur Verfügung. Lediglich einige Dinge haben sich zum Original geändert.

Mit den zwei data-Attributen data-delay und data-duration steuert man die Verzögerung sowie die Animationsdauer. Und statt der Klassen animated und der gewünschten Animationsklasse nutzt man jetzt animate und die Animationsklasse mit a_ als Suffix. Das sieht dann zum Beispiel so aus:

Das hier wird animiert

Schreibe einen Kommentar

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