Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao
Der Dockmedia Blog
AOS Animate On Scroll Library – Webseiten-Inhalte beim Scrollen einblenden
Inhaltsverzeichnis
AOS Animate On Scroll Library – Webseiten-Inhalte beim Scrollen einblenden
Webdesigner stehen immer vor einer großen Herausforderung. Unabhängig vom Projekt sollen im Idealfall immer mehr Inhalte einem Besucher vermittelt werden, ohne dabei überladen zu wirken. In der Regel wird mit den Inhalten auch ein ganz bestimmtes Ziel verfolgt. Es muss stets sichergestellt werden, dass ein Besucher die Informationen nach und nach in der richtigen Reihenfolge angezeigt bekommt. Eine überladene Seite führt in der Regel lediglich dazu, dass der verwirrte Besucher die Seite bereits nach kurzer Zeit wieder verlässt und nicht wieder zurückkehrt.
Den Blickpunkt des Betrachters lenken
Ein weiterer Vorteil dieser optisch ansprechenden Funktion besteht darin, dass mit ihr der Blickpunkt des Nutzers optimal gelenkt werden kann. Auf herkömmlichen Seiten hat sich das Nutzungsverhalten etabliert, die Inhalte einer Website lediglich grob zu überfliegen und zu scannen. Werden diese jedoch erst nach und nach eingeblendet, so entsteht bei jedem Container der Eindruck, dass es sich um ein neues Element handelt und dieses wird genauer betrachtet. Dieser Effekt kann insbesondere für Inhalte genutzt werden, in denen die Reihenfolge der Elemente eine tragende Rolle spielt.
Die Javascript-Library AOS – übersichtlich und optisch ansprechend
Mit Hilfe der Javascript Bibliothek AOS ist es möglich, einzelne Container zu deklarieren, die erst dann sichtbar werden, sobald diese sich im Viewpoint des Betrachters befinden. Die Einblendung der Objekte kann durch unterschiedliche Animationen realisiert werden und sorgt dadurch für mehr Abwechslung und Gestaltungsmöglichkeiten im Design.
So werden die Dateien eingebunden
<link rel="stylesheet" href="dist/aos.css">
<script src="dist/aos.js"></script>
Folgende Animationstypen sind vorgegeben
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
- flip-up
- flip-down
- flip-left
- flip-right
- slide-up
- slide-down
- slide-left
- slide-right
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
<div class="aos-item" aos="fade-up">
Hier stehen die Inhalte
</div>
Folgende Konfigurationen stehen zur Verfügung
Aos-Offset: 120 – Die Animationen früher oder später auslösen
aos-duration: 400 – Dauer der Animation (ms)
aos-easing: ‘ease’ – linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart
aos-delay: 0 – Delay-Animation (ms)
aos-anchor: null – Anker-Element welches die Animation anstelle vom tatsächlichen Element-Offset auslöst
aos-anchor-placement: ‘top-bottom’ – Ankerplatzierung
top-bottom, top-center, top-top, center-bottom, center-center, center-top, bottom-bottom, bottom-center, bottom-top
aos-once: false / true – Bestimmt, ob die Animation nur einmal abgespielt wird.
Beispiel einer Konfigurationen
AOS.init({
offset: 200,
delay: 0,
easing: 'ease-in',
duration: 200,
disable: false, // Animationen werden auf dem mobilem Gerät nicht abgespielt
once: false,
startEvent: 'DOMContentLoaded'
});
Custom Animationen
Eigene Animationen können ebenfalls erstellt werden.
HTML
<div class="item" data-aos="example-anim">Custom Animation</div>
SCSS
[data-aos="example-anim"] {
background: red;
opacity: 0;
transition-property: background, opacity;
&.aos-animate {
opacity: 1;
background: green;
}
}