Animiertes Scrolling mit ScrollReveal

Scroll Reveal Effekte

Scroll Reveal Effekte

Animationen sind Techniken, die für den Betrachter ein bewegtes Bild erzeugen. Bei Animationen geht um so grosse Worte wie Charme und das Ziel einer Animation ist Aufmerksamkeit. Die bewegten Bilder werden durch quetschen und strecken, beschleunigen und abbremsen, überlappende und unterstützende Bewegungen, Bewegungsbögen, Übertreibungen und weitere Effekten erstellt.
Fast jede Website enthält in der einen oder anderen Weise Animationen, beispielsweise für die Art und Weise wie ein Menü aufklappt oder ein Button geklickt wird. Animationen können auf den Besucher sehr polarisierend wirken. Man mag sie oder man mag sie nicht. Allgemein akzeptierte Animationen sind eher dezent und unauffällig und werden auf den ersten Blick gar nicht als Animation wahrgenommen.

Letzte Woche bin ich mal wieder über die JavaScript Library ScrollReveal „gestolpert“. Die gibt es schon seit mehreren Jahren, aber der Effekt kommt nun auch bei größeren Sites an. So prinzipiell geht es darum den Vorgang des Scrollen mittels JavaScript zu animieren. Die Elemente der Website werden dabei während des Scrollens „charmant“ eingeblendet. Gerade auf mobilen Geräten ist dieser Effekt sehr oft zu sehen.

Zum besseren Verständnis, hier ein, wie sollte es anders sein, animiertes GIF um den Effekt etwas deutlicher zu machen.

Animiertes Scrollen
Animiertes Scrollen

Um ein wenig die „Magie“ aus der Sache zu nehmen und dich zu motivieren, auch mal mit Animationen zu experimentieren, zeige ich wie einfach dieser Effekt in jede Website eingebaut werden kann.

ScrollReveal in eine Website einbauen

Scroll Reveal ist eine 8.8 Kilobyte große JavaScript Datei, die den notwendigen JavaScript Code enthält. Du kannst sie auf deinen Server laden oder aus einem Content Delivery Netzwerk nutzen.

Um die Datei einzubinden, musst du sie in den HTML Code deiner Site einbinden.

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

In WordPress und Joomla geht das ganz leicht im Admininistrationsbereich (WordPress: Design -> Editor, Joomla: Erweiterungen -> Templates). Wenn du die Dateien nicht per Browser bearbeiten kannst, musst du die passende Datei, wie beispielsweise in Drupal per FTP oder auf der Konsole ändern oder eine Erweiterung installieren mit der du die Dateien im Browser bearbeiten kannst.

Ich bleibe beim WordPress Beispiel und ändere gleich mal unser Novatrend Blog. In der Datei mit der Fußzeile, die in WordPress meistens footer.php heißt, musst du den Code einbinden.

Scrollreveal in Footer einbinden
Scrollreveal in Footer einbinden

Die Datei wird nun bei nächsten Seitenaufruf geladen. Noch passiert aber nichts, denn du musst noch konfigurieren, auf welche CSS Klassen welcher Effekt angewendet werden soll.

Um beispielsweise alle Artikel in der Übersichtsliste zu animieren, benötigst du folgenden Code:

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
</script>

window.sr ist umfasst alle Bereiche auf die die Animationen angewendet werden sollen.
sr.reveal(‚.[CSS Klasse]‘, { [Parameter] } übergibt eine bestimmte Konfiguration des Effekts an die CSS Klasse, die animiert werden soll. In meinem Fall soll die Klasse .post in 2000 Millisekunden (duration: 2000) von unten kommend (origin: ‚bottom‘) eingeblendet werden.

Wenn du also beispielsweise das Menü von oben, die Widgets von rechts und die Artikel von unten einblenden willst, musst du für die entsprechenden CSS Klassen diese Bedingungen formulieren. Die Namen der Klassen sind abhängig vom Template.

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
  sr.reveal('.widget', {
  duration: 2000,
  origin: 'bottom'
    })
  sr.reveal('.site-header-menu', {
  duration: 2000,
  origin: 'bottom'
    })
</script>

Den Effekt, den dieser Code erzeugt, erlebst du gerade hier auf der Site.

Hinweis: Abhängig von der Länge der Beiträge ist es sinnvoll, andere Klassen als .post zu konfigurieren. Wenn der Beitrag nicht auf den Screen passt, wird er sonst erst nach beim Scrollen angezeigt. Hier im Blog habe ich letztlich die Klassen .entry-header, .post-thumbnail, .caption und .entry-footer angesprochen, so dass sich auch ein einzelner Artikel nach und nach aufbaut. 

Du kannst es so konfigurieren, dass die Animation einmalig erscheint (default) oder so, das jedesmal, wenn das Element auf dem Bildschirm erscheint die Animation ausgeführt wird (window.sr = ScrollReveal({ reset: true });). Ich habe mich für eine einmalige Animation entschieden.

Elemente können auch ins Bild gedreht werden und es gibt viele weitere Effekte, die auf der GitHub Page des Projekts beschrieben werden.

Link

https://scrollrevealjs.org


tl;dr: Scroll Animationen sind viel einfacher als du denkst

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen