Seite 3: Zusammenspiel mit JavaScript

Inhaltsverzeichnis

Zusammenspiel zwischen Animate.css und JavaScript

Animate.css kann man ganz ohne JavaScript betreiben. Das ist allerdings kein Muss. Tatsächlich lässt es sich gut mit der Skriptsprache kombinieren. So ist Animate.css auch auf den Einsatz von jQuery vorbereitet.

Zum Beispiel lassen sich Animationen mit dem bekannten Framework dynamisch in Anwendungen einfügen:

$('#content').addClass('animated bounceOutLeft');
 

Auch AngularJS lässt sich zusammen mit Animate.css nutzen. Von Hause aus sind Animationen in AngularJS nicht ohne weiteres umzusetzen. Hauptgrund dafür ist die etwas komplizierte Anwendung der Winkeldefinitionen. Durch die Kombination von AngularJS mit Animate.css entfallen sie:

div[ng-view].ng-enter {
    -webkit-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}

Ein wenig komplexer stellt sich die Angelegenheit dar, wenn Inhalte dynamisch zu verstecken oder hinzuzufügen sind.

.ng-hide-remove {
    -webkit-animation: bounceIn 2.5s;
    animation: bounceIn 2.5s;
}
.ng-hide-add {
    -webkit-animation: flipOutX 2.5s;
    animation: flipOutX 2.5s;
    display: block !important;
}

Entscheidend ist hier die !important-Anweisung, die das standardmäßig auf ng-hide-add angewendete display: none überschreibt.

Mit Wow.js gibt es eine JavaScript-Bibliothek, mit der man Animate.css individuell steuern kann. (Es lässt sich auch für andere Animations-Anwendungen verwenden, wofür allerdings eine Anpassung des Skripts nötig ist.) Entwickelt wurde sie, um Anwendungen, bei denen Animationen durch Scrollen ausgelöst werden, leichter erstellen zu können. Das Skript ist gerade einmal 3 KByte groß.

Um Wow.js einzusetzene, bindet man es nach animate.css ein und aktiviert es:

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

Damit sind die Funktionen des Projekts auf der Webseite verfügbar und lassen sich nutzen. Dazu weist man dem Element, das erst beim Scrollen sichtbar werden soll, die Klasse wow zu:

<div class="wow">Das ist der Elementinhalt</div >

Zusätzlich lässt sich mit Animate.css der gewünschte Effekt festlegen:

<div class="wow bounceInUp">Das ist der Elementinhalt</div >

Mit data-Attributen bietet Wow.js weitere Einstellmöglichkeiten. Über sie lassen sich die Animationsdauer (data-wow-duration), die Verzögerung der Animation (data-wow-delay), der Aktivierungsmoment (data-wow-offset) und die Anzahl der Durchläufe (data-wow-iteration) festlegen.

<section class="wow slideInLeft" data-wow-duration="2s" 
data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" 
data-wow-iteration="10"></section>
 

Wem die genannten Möglichkeiten nicht genügen, der kann eigene CSS-Animationen verwenden. Dafür lassen sich dem Skript die gewünschte Klasse, die sichtbaren Elemente und der geplante Offset übergeben.

wow = new WOW( {
    boxClass:     'wow',  
    animateClass: 'animated', 
    offset:       0          
  }
)
WOW.init();

(Wie die beschriebene Aktion aussieht, lässt sich beispielsweise auf dieser Webseite betrachten.)