Durchs Scrollen aktivierte Animationen entwickeln sich derzeit zu einem Trend der Web-Entwicklung. Mit diesen Effekten lassen sich spannende und interaktive Scrollytelling-Webseiten entwickeln, die nicht nur als Technik-Spielerei, sondern auch für geschäftliche Online-Auftritte bestens geeignet sind.

Die Umsetzung von Scroll-Activated-Animations kann ein sehr zeitraubender Akt sein. Nicht nur die Ausarbeitung der Animationen, auch das Verarbeiten des aktuellen Viewports und der genauen Bestimmung des Auslösezeitpunkts, kann viel Zeit in Anspruch nehmen. Das WOW.js-Skript nimmt dir diesen Kraftakt ab und bietet zusammen mit Animate.css eine schlanke und einfach zu bedienende Lösung – ohne irgendwelche Abhängigkeiten, wie zum Beispiel eine jQuery-Bibliothek.

Um mit dem Skript loszulegen, brauchst du nur das Stylesheet von Animate.css und die WOW.js-Datei. Mit der init()-Methode aktivierst du die Funktionalität von WOW.js für deine Website:

<link rel="stylesheet" href="css/animate.min.css">

<script src="js/wow.min.js"></script>

<script>

new WOW().init();

</script>

Um von WOW.js profitieren zu können, musst du nun den Elementen, die erst beim Scrollen sichtbar werden sollen, die .wow-CSS-Klasse zuweisen.

<div class="wow"> Content to Reveal Here </div >

Mithilfe von Animate.css-Klassen kannst du dann eine Animation für das Erscheinen des Elementes festlegen.

<div class="wow bounceInUp"> Content to Reveal Here </div >

WOW.js bietet neben der Standard-Konfiguration einige fortgeschrittene Einstellungsmöglichkeiten, die mithilfe von data-*-Attributen gesteuert werden können.

Mit data-wow-duration änderst du die Dauer der Animation, mit data-wow-delay legst du die Verzögerung für die Animation fest. Mit data-wow-offset legst du den Zeitpunkt fest, ab dem das Element „aktiviert“ werden soll und mit data-wow-iteration kannst du die Anzahl der Animations-Durchläufe 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>

Selbstverständlich kannst du WOW.js auch mit eigenen CSS-Animationen verwenden. Hierfür bietet das Skript die Möglichkeit die Standard-Klassen für Animationen, die sichtbaren Elemente und den Default-Offset zu ändern.

wow = new WOW(

{

boxClass: 'wow', // default

animateClass: 'animated', // default

offset: 0 // default

}

)

WOW.init();

Auf der offiziellen Webseite von WOW.js erfährst du mehr über die Bibliothek. Bei Fliplingo, Nasty Icons und Streamline Icons kannst du die Bibliothek in einem weniger verspieltem Szenario erleben. Für weitere Inspirationen haben wir einige schicke Seiten mit Scroll-Activated-Animations für dich zusammengestellt.

Scroll-Activated-Animations: Hype oder wirkliches Feature? Was meint ihr?