Was ist scrollreveal.js?

scrollreveal.js ist eine JavaScript Library mit der einzelne Elemente wie Bilder, Texte oder ganze Blöcke (<div>) animiert werden können. Der wohl größte Vorteil dabei ist, dass scrollreveal.js bereits eine Prüfung des Viewports mit sich bringt. Das heißt, es muss lediglich die Library auf der Webseite eingebunden werden und die gewünschte Elemente mit entsprechenden Identifikationen versehen werden. Das Script übernimmt dann die Prüfung der angezeigten Elemente und deren Animation. Um scrollreveal.js zu nutzen muss zunächst die Library auf der Webseite eingebunden werden. Wahlweise kann die Library heruntergeladen und entsprechend in das Projekt integriert werden oder direkt über den Autor eingebunden werden. Aus Gründen der besseren Performance ist es allerdings immer besser die Datei herunterzuladen und direkt im Projekt bereit zu stellen.

Dateien herunterladen

Download Sobald die Library auf der Webseite eingebunden ist benötigt die Funktionen einen Initialen Aufruf auf der Webseite. Dieser kann in der Form eines kurzen Scriptes umgesetzt werden:

window.sr = ScrollReveal();
sr.reveal('.slideInUp', { delay: 100, distance : '120px', origin : "bottom", scale : 1});

Mit diesem Script wird scrollreveal quasi gestartet und es wird die erste Animation definiert. In diesem Fall heißt diese slideInUp. Zusätzlich werden der Animation verschiedene Eigenschaften mit gegeben. In diesem Fall eine Verzögerung von 100ms und eine Distanz von 120px nach oben. Anschließend kann einem Element auf der Webseite die Animation hinzugefügt werden. Hierfür muss einem Element die Klasse slideInUp hinzugefügt werden. Nun kann bereits die Webseite getestet werden. Das Element wird sich nun mit einer Verzögerung von 100ms um 120px nach oben schieben sobald es den Viewport des Users betritt. Weitere Informationen zu den einzelnen Eigenschaften der Animationen finden sich auf der Demo Seite von scrollreveal.js: https://scrollrevealjs.org/

Beispiel:

Ein einfaches Beispiel wann sich die Animationen eines Elementes besonders Lohnt: Auf einer Seite soll ein Bild mit einer Animation versehen werden sobald das Bild in den Viewport des Users betritt. Das heißt, der User Scrollt zunächst auf der Seite nach unten bis das entsprechende Element dargestellt wird. Exakt in dem Moment indem das Bild für den User sichtbar wird startet die Animation und das Bild wird beispielsweise leicht nach oben geschoben. Auf den User hat diese Animationen einen besonderen Effekt. Er nimmt das Bild stärker war, da es sich unterschiedlich zu den anderen Elementen der Webseite verhält. Hieraus lässt sich auch schnell das Ziel solcher Animationen erkennen. Einzelne Elemente ins Rampenlicht rücken. Dies funktioniert aber nur dann, wenn lediglich einzelne Elemente mit solchen Animationen versehen werden. Gerade für wichtige Informationen und Bilder bietet sich so etwas also besonders an. Am Beispiel einer Seite zur Bestellung eines Artikels würde es sich also anbieten ein Bild welches den Artikel besonders gut präsentiert zu animieren.

Interessante Links:

Hier noch zwei gute Video Tutorials zum Einstieg in scrollreveal.js (Englisch): https://www.youtube.com/watch?v=s5R3sie4mks https://www.youtube.com/watch?v=hM86KjsJUC4