Elemente auf einer Website beim Scrollen animieren

AOS – Leichtgewichtige Animate-on-Scroll-Library
Kommentare

Um Elemente auf einer Website beim Scrollen zu animieren, gibt es bereits zahlreiche Libraries auf dem Markt. Das Problem an der Sache: Gerade bei umfangreichen Seiten hat der Webentwickler nur wenig Kontrolle, außerdem werden die Animationen vollständig von JavaScript gehandhabt, indem Inline-CSS eingefügt wird. Einen anderen Ansatz fährt deswegen die leichtgewichtige Animate-on-Scroll-Library AOS.

Diese ist zwar ebenfalls vollständig in JavaScript geschrieben, bietet aber bessere Möglichkeiten zur Kontrolle der Elemente. So sorgt sie dafür, dass die Position von Elementen erkannt und erst dann passende Klassen zu ihnen hinzugefügt werden, wenn sie im Viewport erscheinen. Der Entwickler der Library, Michał Sajnóg, wollte damit vor allem die Verantwortlichkeiten von AOS strikt trennen: während die gesamte Logik innerhalb des JavaScripts zu finden ist, sollen alle Animationen über CSS ausgeführt werden. Entwickler können so leicht eigene Animationen hinzufügen und, wenn nötig, für den Viewport passend ändern.

So funktioniert AOS

Eigentlich ist die Idee hinter der Animate-on-Scroll-Library simpel, erklärt Sajnóg: es werden einfach alle Elemente und ihre Positionen auf der Website anhand von vom Entwickler vorgenommenen Einstellungen überwacht. Für die Animation wird dann lediglich die Klasse aos-animate hinzugefügt beziehungsweise entfernt.

Außerdem bringt AOS eine Reihe von verschiedenen Animationen mit, die bereits Out-of-the-Box verfügbar sind. Doch auch neue Animationen lassen sich leicht erstellen – und zwar ohne, dass man sich über die Dauer oder Verzögerung Sorgen machen müsste. Im CSS werden nur dem Attribut aos Styles hinzugefügt, das transition-property festgelegt und post-transition-Properties zu .aos-animate hinzugefügt.

HTML5 Days 2017

Flexbox in der Praxis

mit Jens Grochtdreis (webkrauts.de)

Darüber hinaus bringt die Library auch einige zusätzliche Features mit sich, zum Beispiel Anker, mit denen ein Element auf Basis der Position eines anderen Elements animiert werden können, oder das einfache Deaktivieren von Animationen auf Mobile Devices.

Installation und Demo

Die Installation der Library ist denkbar einfach: sie kann entweder direkt von der Projektseite heruntergeladen oder über Bower installiert werden. Anschließend wird das aos-Attribut zu einem HTML-Element hinzugefügt; das Skript löst festgelegte Animationen für dieses Element aus, wenn User zu dem Element scrollen.

Einen Eindruck von den Animationsmöglichkeiten von AOS bietet die Projektseite, hier stehen auch verschiedene Demos zur Ansicht zur Verfügung.

Name AOS
Hersteller Michał Sajnóg
Projektwebsite http://michalsnik.github.io/aos/
GitHub https://github.com/michalsnik/aos

Aufmacherbild: Computer Cursor Arrow on Scroll Bar with Empty Application Window as Copy Space, Visible Screen Pixels. von Shutterstock / Urheberrecht: igor.stevanovic

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -