JavaScript-Library zum Erstellen von Animationen: scrollReveal.js
Kommentare

Animationen sind ein netter Hingucker auf vielen Websites und es gibt zahlreiche Möglichkeiten, wie sie sich erstellen lassen.

So gibt es komplette JavaScript-Libraries, die ausschließlich zum Erstellen von Animationen dienen. scrollReveal.js, das wir Euch bereits Anfang des Jahres kurz vorgestellt haben, ist nur ein Beispiel für eine JavaScript-Library, mit der Elemente zum Vorscheinen gebracht werden können, wenn sie in den Viewport eintreten. In einem Tutorial erklärt Aurelio de Rosa die Nutzung der Library.

Zahlreiche Effektmöglichkeiten in scrollReveal.js

Unter den verschiedenen JavaScript-Libraries, die sich zum Erstellen von Animationen nutzen lassen, fällt scrollReveal.js besonders durch seine geringe Größe auf. Zudem ist es eine eigenständige Library ohne zusätzliche Abhängigkeiten. Als nettes Extra können die gewünschten Animationen – zumindest in einem bestimmten Rahmen – mit natürlicher Sprache definiert werden.

Die Nutzung der Library ist dadurch denkbar einfach. Nach der Installation werden einige Elemente mit einem data-sr-Attribut versehen oder hinzugefügt, die mithilfe verschiedener Effekte weiter modifiziert werden können.

So lässt sich beispielsweise festlegen, von wo ein Element in den Viewport eintritt oder um wie viel Pixel es dabei bewegt werden soll. Genauso können Elemente hoch- oder runterskaliert und festlegt werden, nach wie vielen Sekunden der Effekt ausgeführt wird.

Einige Beispiele für die Nutzung der JavaScript-Library bietet Aurelio de Rosas Tutorial; der Code steht auf GitHub zur Verfügung. Dort findet sich auch eine Demo, die zeigt, wie scrollReveal.js in Aktion aussehen kann.

Aufmacherbild: Zipper revealing a colorful sunflower von Shutterstock / Urheberrecht: Delpixel

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -