Webseiten müssen immer mehr Inhalte transportieren können und dürfen dabei niemals überladen wirken. Der Besucher muss schnell und übersichtlich zu seinem Ziel gelangen und darf nicht mit Informationen überschüttet werden. Fühlt sich der Besucher missverstanden und findet sich im Wirrwarr der Informationen nicht zurecht, verlässt er die Webseite meist direkt. Damit wir das verhindern können, sollten wir natürlich zuerst die Struktur und Sitemap unsere Webseite vernünftig aufbereiten und alle Informationen logisch und einfach zueinander anordnen. Menüpunkte müssen aussagekräftig und verständlich sein und innerhalb einer Seite muss das Layout aufgeräumt und barrierefrei funktionieren.
Javascript-Lib AOS: Installation und Benutzung
Damit wir den Fokus des Betrachters, während des Scrollens, besser auf die wesentlichen Punkte leiten und dabei noch einen hübschen visuellen Mehrwert bieten können, gibt es die Javascript-Lib AOS. Diese Library ermöglicht uns, Container zu bestimmen, die erst eingeblendet werden, sobald sie sich im Viewport befinden. Durch das Einblenden wird automatisch das Auge des Betrachters auf den neuen Inhalt gelenkt und der Nutzer weiß direkt, welcher Inhalt folgt. Besonders bei Anleitungen, How-to’s oder Präsentationen ist die richtige Reihenfolge der Erfassung sehr wichtig.
Damit wir mit der Lib arbeiten können, müssen wir nur die beigefügte CSS- und JS-Datei unserem Projekt hinzufügen. Die Dateien könnt ihr aus dem Github-Repo entnehmen. Folgend müssen wir nur noch unsere HTML-Container mit den Data-Attributen bestücken und das Plugin initialisieren.
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>AOS.init({ duration: 1200 });Das Beispiel findet ihr auch auf Codepen.
Natürlich gibt es noch mehr Optionen, die ihr direkt über das Data-Attribut oder der API beeinflussen könnt, hierzu findet ihr alle Informationen in der Dokumentation. Wer noch Inspiration braucht, kann auch die offiziell Webseite besuchen, um sich noch mehr unterschiedliche Animationen anzuschauen.