Anzeige
Anzeige
Tool-Tipp

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

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.

Von Ilja Zaglov
2 Min.
Artikel merken
Anzeige
Anzeige

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

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
<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.

Anzeige
Anzeige
<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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (5)

Community-Richtlinien

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.

Yannick

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

Thomas

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

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

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige