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

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;
  }
}

Zurück

„SEMPER PARATUS“ MORSEN SIE MICH AN!

Die Angaben aus dem Formular werden zur Beantwortung deiner Anfrage erhoben und verarbeitet. Die Daten werden nach abgeschlossener Bearbeitung Deiner Anfrage wieder gelöscht.

Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer Datenschutzerklärung.

 

Bitte rechnen Sie 8 plus 8.

Am besten per Telefon 040 - 48409613 oder E-Mail.
Ich stehe Ihnen jederzeit zur Verfügung.

Nach oben