Animation on Scroll (AOS)
Elemente werden beim Scrollen animiert
Mit dieser Funktion können Elemente auf einer Webseite beim Scrollen animiert werden.
Installation
HTML
Fügen Sie den folgenden Code in den <head>-Bereich ihrer HTML-Seite ein.
HTML - Body - JavaScript einügen
Fügen Sie dieses Javascript vor dem schließenden <body>-Tag ein.
Wie wird es verwendet?
Animation festlegen
Mit dem Attribut data-aos kann einem Element eine Animation zugewiesen werden.
Zusätzliche Einstellungen (optional)
Das Verhalten kann gesteuert werden, wenn mehrere data-aos-* Attribute verwendet werden
Optionen und Einstellmöglichkeiten
Animationen - Fade
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
Animationen - Flip
- flip-up
- flip-down
- flip-left
- flip-right
Animationen - Slide
- slide-up
- slide-down
- slide-left
- slide-right
Animationen - Zoom
- 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
Anchor placements
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Easing Funktionen
- 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