AOS: CSS-gesteuerte "On Scroll"-Animationsbibliothek

Der folgende Beitrag ist ein Gastbeitrag von Michał Sajnóg, einem Front-End-Entwickler bei Netguru. Michał hat eine dieser Bibliotheken erstellt, die Animationen auslösen, wenn Sie zu einem bestimmten Punkt scrollen. Eines, das ich daran mag, ist, dass es so viel wie möglich an CSS überlässt, um die Animationen selbst zu erstellen und zu steuern. Ganz zu schweigen davon, dass es sich bewährt hat, indem es auf einer Reihe von Produktionsseiten gut funktioniert hat. Ich überlasse Michał das Wort.

Haben Sie schon einmal diese langen Webseiten gesehen, auf denen beim Scrollen nach unten verschiedene Animationen angewendet werden? Ich möchte Ihnen ein Plugin vorstellen, das ich geschrieben habe und das es sehr einfach macht, alle Arten von Animationen mit voller CSS-Kontrolle und ohne Aufwand zu handhaben.

Wenn Sie sofort loslegen möchten, ist der Code auf GitHub.

Das Problem mit anderen Bibliotheken

In meinem früheren Unternehmen haben wir WOW.js (oder ähnliche Bibliotheken) verwendet, um Elemente beim Scrollen zu animieren. Für einfache Projekte war es ganz nett, aber bei größeren Websites wollten wir mehr Kontrolle darüber haben, was tatsächlich passiert. In allen beliebten Bibliotheken wurden Animationen vollständig von JavaScript gehandhabt, indem Inline-CSS eingefügt wurde. Arghgh! Inline-Stile sind böse. Sie sind schwer zu kontrollieren und zu überschreiben. Obwohl es in einigen Fällen in Ordnung ist, sie mit JavaScript zu setzen, ist es immer noch viel sauberer, sie dort zu belassen, wo sie hingehören, und alle CSS-bezogenen Dinge in der CSS-Datei zu handhaben.

Ich habe beschlossen, eine Bibliothek mit einem klaren Ziel zu erstellen: die Position von Elementen erkennen und dann entsprechende Klassen hinzufügen, wenn sie im Viewport erscheinen.

Animationen komplett in CSS steuern

Ich wollte die Verantwortlichkeiten mit meiner neuen Bibliothek aufteilen

• Die gesamte Logik im JavaScript
• Alle Animationen im CSS

Dies ermöglicht es Ihnen, Ihre eigenen Animationen einfach hinzuzufügen und Dinge wie die Änderung dieser entsprechend dem Viewport zu tun.

Wie AOS funktioniert

Die Idee hinter AOS ist einfach: Alle Elemente und ihre Positionen basierend auf den von Ihnen vorgegebenen Einstellungen beobachten. Dann die Klasse aos-animate hinzufügen/entfernen. Natürlich ist es in der Praxis nicht immer so einfach, aber die Idee hinter AOS ist so simpel. Jeder Aspekt der Animation wird von CSS gehandhabt.

Beispielanimationen in CSS

Es gibt viele verschiedene Animationen, die sofort einsatzbereit sind, aber das Erstellen neuer ist ebenfalls einfach. Hier ist ein Beispiel

[aos="fade"] {
  opacity: 0;
  transition-property: opacity;
}

[aos="fade"].aos-animate {
  opacity: 1;
}

Sie müssen sich keine Gedanken über Dauer oder Verzögerung machen. In CSS setzen Sie nur

• Stile für das Attribut aos mit dem Namen Ihrer Animation
• Setzen Sie transition-property (standardmäßig ist dies all, sodass es performanter und vorhersagbarer ist, wenn Sie die Übergänge auf die beabsichtigten Eigenschaften einschränken)
• Fügen Sie die Post-Transition-Eigenschaften bei .aos-animate hinzu

Dinge wie Dauer/Verzögerung/Easing werden unabhängig von der Animation gesetzt.

Beispiel-HTML

<div class="some-item" aos="fade">Example Element</div>

oder mit einer anderen Übergangsdauer

<div class="some-item" aos="fade" aos-duration="500">Example Element</div>

**Tipp:** Sie können data-aos anstelle von aos verwenden, um Ihr HTML ordnungsgemäß zu validieren.

Live-Demos

Mit verschiedenen Animationen

Sehen Sie sich den Pen AOS – Animationen von Snik (@michalsnik) auf CodePen an.

Mit verwendeter Anker-Einstellung

Sehen Sie sich den Pen AOS – Anker von Snik (@michalsnik) auf CodePen an.

Mit Ankerplatzierung und unterschiedlichem Easing

Sehen Sie sich den Pen AOS – Anker & Ankerplatzierung von Snik (@michalsnik) auf CodePen an.

Mit einfachen benutzerdefinierten Animationen

Sehen Sie sich den Pen AOS – benutzerdefinierte Animationen von Snik (@michalsnik) auf CodePen an.

Zusätzliche Funktionen

• Anker – Animieren Sie ein Element basierend auf der Position eines anderen Elements
• Ankerplatzierung – Animieren Sie ein Element basierend auf seiner Position auf dem Bildschirm. Es muss nicht nur animiert werden, wenn es im Viewport erscheint, sondern zum Beispiel, wenn der untere Teil des Elements die Mitte des Bildschirms erreicht
• Beidseitige Animationen – Standardmäßig werden Elemente beim Scrollen nach oben und unten animiert, aber Sie können sie zwingen, nur einmal zu animieren
• Einfache Deaktivierung – Deaktivieren Sie Animationen auf Mobilgeräten mit vordefinierten Optionen wie mobile, phone, tablet oder mit einer benutzerdefinierten Bedingung/Funktion
• Async-fähig – Berechnet die Positionen von Elementen bei DOM-Änderungen neu, sodass Sie nach dem Laden von etwas über Ajax keine Sorgen haben müssen (es sei denn, Sie unterstützen IE9, da Mutation Observer benötigt wird)
• Keine Abhängigkeiten – Diese Bibliothek ist in reinem JS geschrieben und hat keine Abhängigkeiten

AOS ist vollständig Open Source, wenn Sie also eine interessante Idee haben oder etwas nicht so funktioniert, wie Sie es erwarten, öffnen Sie ein Issue und sehen Sie sich auf GitHub! Jeder Beitrag wird sehr geschätzt.