Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao

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