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
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.
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.
Hilfreiche und interessante Links
https://www.mediaevent.de/javascript/dimension.html
https://animista.net/
https://caniuse.com/
https://blog.kulturbanause.de/2020/06/die-co2-emission-einer-website-messen/
https://pdir.de/news/24-tipps-fuer-nachhaltige-webanwendungen.html