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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
Danny
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
Yannick
Yannick

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

Antworten
Thomas
Thomas

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

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung