Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

WOW.js: Scroll-Activated-Animations mit Animate.css

WOW.js macht Scroll Activated Animations einfach. (Screenshot: t3n)

Scroll-Activated-Animations entwickeln sich zu einem Trend in der Web-Entwicklung. Mit dem WOW.js-Skript sparst du dir bei der Erstellung solcher Webseiten eine Menge Arbeit.

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.

WOW.js
WOW.js macht Scroll-Activated-Animations zum Kinderspiel.

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 Screenshot
WOW.js hat keine Abhängigkeiten und kommt ohne Frameworks wie jQuery aus. (Screenshot:t3n)

WOW.js für Fortgeschrittene

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?

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Thomas

@Danny: body{ overflow-x: hidden; } löst das Problem

Antworten
Yannick

Zwei coole Plugins, die ich bei einem aktuellen Projekt einsetze. Leichte Integration und Verwendung. Anschauen lohnt sich.

Antworten
Danny

Habe ich auch bei einem aktuellen Projekt benutzt. Das Problem ist, das seitlich einfahrende Objekte leider einen horizontalen Scrollbalken verursachen, wie man auch sehr schön auf der Nasty Icons Seite sehen kann. BounceIn und SlideIn sind daher etwas unbrauchbar. Selbst von oben oder unten wird zum Teil die Seite nach unten hin extrem länger. Fade funktioniert aber prima.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.