Animation mit css und keyframes

Animation im Viewport starten

CSS-Animationen mit keyframes mit Javascript starten

Falls eine Animation nicht automatisch startet, kann mit ein paar Zeilen Javascript die Animation aktiviert werden, wenn das Element beim Scrollen sichtbar wird.

Beispiel

Here comes the text …

HTML

<div id="id-of-element">Here comes the text ...</div>

Javascript

// Text animieren, wenn sichtbar
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
document.addEventListener('scroll', function () {
  if ( document.getElementById('id-of-element') )
       if ( isInViewport(document.querySelector('#id-of-element')) ) 
	    document.querySelector("#id-of-element").classList.add("fade-in-right");
}, {
    passive: true
});

CSS

.fade-in-right {
  opacity: 1;
  -webkit-animation: fade-in-right 10s ease-in-out 1s both;
  animation: fade-in-right 10s ease-in-out 1s both;
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

Anwendung

Eingebaut ist der Code-Schnipsel auf folgender Seite: https://vestart.de/

Animation mehrfach starten

Normalerweise wird eine Animation nur einmal gestartet, egal in welche Richtung im Browser gescrollt wird.

Um die Animation mehrfach zu starten, immer dann, wenn das Element sichtbar wird wie im folgenden Beispiel, muss der Javascript-Code mit nur 2 Zeilen ergänzt werden.

Here comes the text ...

Javascript

.
.
.
document.addEventListener('scroll', function () {
  if ( document.getElementById('id-of-element') )
       if ( isInViewport(document.querySelector('#id-of-element')) ) 
	    document.querySelector("#id-of-element").classList.add("fade-in-right");
       else
	    document.querySelector("#id-of-element").classList.remove("fade-in-right");
}, {
    passive: true
});

Last but not least

Auch wenn Animationen großen Spaß machen und tolle Effekte in die Webseite zaubern, sollte man dabei nicht den Energieverbrauch vergessen.
Der CO2-Ausstoss durch das Internet ist inzwischen höher als der im globalen Flugverkehr ... und das nicht erst seit Corona.

Ziel sollte es sein, eine energieeffiziente und nachhaltige Webanwendungen zu schreiben.

Energieeffiziente Webandwendungen der Umwelt zu Liebe
Quelle: pixabay.com
Kontakt
05254 / 67673
info@bt-webdesign.de
Kontaktformular