Dezente Animationseffekte in Onlinedokumentation

Ein paar (dezente!) Animationseffekte beim Scrollen können auch in einer Onlinedokumentation ein wenig zur Belebung beitragen. Hierfür reichen bereits die Mittel von CSS vollkommen aus.

Was jedoch trotz Animation stets gewährleistet sein muss, ist eine möglichst direkte und schnelle Anzeige der vom Nutzer gesuchten Informationen. Manche Nutzer mögen oder vertragen viel Bewegung auf dem Bildschirm auch prinzipiell nicht. Animationen sollten daher nur dann ausgeführt werden, wenn der jeweilige Nutzer in seinem Betriebssystem die Darstellung von Animationen nicht eingeschränkt oder unterbunden hat. Hierfür sorgt in CSS die Abfrage prefers-reduced-motion, die alle der nachfolgenden Beispiele berücksichtigen.

Beispiel 1: Dezent animierte Links

Bei den folgenden beiden Links erscheint die Unterstreichung unter dem Link nicht sofort vollständig, sondern animiert von links nach rechts oder von innen nach außen.

Die Animation wird nur dann ausgeführt, wenn Sie z. B. unter Windows nicht in den Systemeinstellungen unter Erleichterte Bedienung > Bildschirm die Option Animationen in Windows anzeigen ausgeschaltet haben.

Probieren Sie es!

Bewegen Sie die Maus auf diesen animierten Link.

Implementierung zu Beispiel 1

Für die Animation von links nach rechts ergänzen Sie den folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


a a:visited {
  text-decoration: none;
  position: relative;
  color: #069;
}
a:hover {
  text-decoration: none;
}
a:after, a:visited:after {
  content: '';
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background: #069;
  transition: 0.2s;
}
a:hover:after, a:visited:hover:after {
  width: 100%;
}
@media (prefers-reduced-motion) {
 .a:after, a:visited:after {
   transition: 0s;
 }
}

Für die Animation von der Mitte nach außen ergänzen Sie den folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


a {
  position: relative;
  color: #069;
  text-decoration: none;
}
a:hover {
  color: #069;
  text-decoration: none;
}
a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #069;
  transform: scaleX(0);
  transition: transform 0.2s;
}
a:hover::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion) {
 a::before {
   transition: transform 0s;
 }
}

Beispiel 2: Smooth Scrolling

Für Links innerhalb einer Seite können Sie in CSS sehr einfach ein animiertes Scrolling („smooth scrolling“) aktivieren. Die Anzeige springt dann nicht direkt zum verlinkten Ziel, sondern scrollt automatisch mit einer sichtbaren Animation dorthin.

Klicken Sie einmal links oben auf die Links in der Inhaltsübersicht zu dieser Seite. Dort können Sie den Effekt beobachten.

Wie in Beispiel 1 wird die Animation nur dann ausgeführt, wenn Sie z. B. unter Windows nicht in den Systemeinstellungen unter Erleichterte Bedienung > Bildschirm die Option Animationen in Windows anzeigen ausgeschaltet haben.

Die Dauer der Animation hängt vom Browser ab und lässt sich nicht steuern.

Implementierung zu Beispiel 2

Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


html {scroll-behavior: smooth}
@media (prefers-reduced-motion) {
  html {scroll-behavior: auto}
}

Beispiel 3: Animiertes Erscheinen von Objekten

Ein zumeist nicht störender, da Nutzer nicht bremsender Animationseffekt ist auch das animierte Erscheinenlassen von Bildern oder Textblöcken beim Scrollen.

Wie in den Beispielen 1 und 2 wird die Animation nur dann ausgeführt, wenn Sie z. B. unter Windows nicht in den Systemeinstellungen unter Erleichterte Bedienung > Bildschirm die Option Animationen in Windows anzeigen ausgeschaltet haben.

Scrollen Sie weiter nach unten und beobachten Sie die erscheinenden Bilder sowie den erscheinenden Text am Ende.

##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### ##### ####### ##### ####### ###### ######### #### ####### ### #### ###### ##### ####### ### ######## # ######### ##### ############ #### ####### #### ##### ### ######### #### ######### ### ####### ####### #### # #### ######## ############# ### ###### ###### ####### ## ####### ### ######## #### ##### ##### ## ####### ##### #### ######## ###### ######### ########## ######### ##### ## #### ######### #######.

Fade-in

Fade-in-bottom

Slide-left

Slide-right

Works just as well for text

#### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### ####

Implementierung zu Beispiel 3

Diese Lösung basiert im Kern auf einem Tutorial von Jemima Abu mit einer Kombination aus CSS und JavaScript.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
.js-scroll.scrolled {
  opacity: 1;
}
.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion) {
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    animation: none !important;
  }
}

Schritt 2: Stellen Sie jedes zu animierende Objekt zwischen folgende zwei HTML-Schnipsel:


<div class="scroll-element js-scroll fade-in">


</div>

Je nach gewünschtem Animationseffekt können Sie dabei fade-in auch ersetzen durch fade-in-bottom oder durch slide-left oder durch slide-right.

Schritt 3: Binden Sie am Ende des Topics oder am Ende Ihrer Seitenvorlage folgenden JavaScript-Code ein:


<script>
const aniscrollElements = document.querySelectorAll(".js-scroll");
var anithrottleTimer;
const anithrottle = (callback, time) => {
  if (anithrottleTimer) return;
  anithrottleTimer = true;
  setTimeout(() => {
    callback();
    anithrottleTimer = false;
  }, time);
}
const anielementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};
const anielementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};
const anidisplayScrollElement = (element) => {
  element.classList.add("scrolled");
};
const anihideScrollElement = (element) => {
  element.classList.remove("scrolled");
};
const anihandleScrollAnimation = () => {
  aniscrollElements.forEach((el) => {
    if (anielementInView(el, 1.25)) {
      anidisplayScrollElement(el);
    } else if (anielementOutofView(el)) {
      anihideScrollElement(el)
    }
  })
}
window.addEventListener("scroll", () => { 
  anithrottle(() => {
    anihandleScrollAnimation();
  }, 250);
});
</script>

___

Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.