Inhaltselemente beim Scrollen animieren – Moderne Scroll-Animationen mit CSS und JavaScript
- 31. August 2026 - JavaScript - 2 minute read
Scroll-Animationen gehören mittlerweile zum Standard moderner Websites. Sie sorgen dafür, dass Inhalte nicht sofort sichtbar sind, sondern erst dann eingeblendet werden, wenn sie in den sichtbaren Bereich des Browsers gelangen.
Richtig eingesetzt können solche Effekte die Benutzerführung verbessern und wichtige Inhalte stärker hervorheben. Gleichzeitig sollte die Umsetzung performant bleiben und nicht zu unnötigen Berechnungen bei jedem Scrollvorgang führen.
In diesem Artikel zeige ich eine einfache Lösung mit CSS und JavaScript, die ohne zusätzliche Bibliotheken auskommt.
Warum nicht einfach das Scroll-Event verwenden?
Viele Entwickler greifen zunächst auf das scroll-Event zurück und prüfen bei jeder Bewegung des Browsers, welche Elemente sichtbar sind.
Bei wenigen Elementen funktioniert das zwar, jedoch muss der Browser dabei permanent Berechnungen durchführen.
Eine deutlich elegantere Lösung bietet die JavaScript-API IntersectionObserver. Sie informiert uns automatisch darüber, wenn ein Element in den sichtbaren Bereich des Browsers gelangt.
Dadurch entsteht weniger Code und gleichzeitig eine bessere Performance.
HTML vorbereiten
Zunächst benötigen wir ein Element, das animiert werden soll.
<section class="animate">
<h2>Meine Überschrift</h2>
<p> Dieser Inhalt wird eingeblendet, sobald er im Viewport erscheint. </p>
</section>CSS für die Animation
Im Ausgangszustand soll das Element unsichtbar sein und leicht nach unten versetzt dargestellt werden.
.animate {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate.is-visible {
opacity: 1;
transform: translateY(0);
}Solange die Klasse is-visible fehlt, bleibt das Element unsichtbar.
Sobald die Klasse hinzugefügt wird, startet die Animation automatisch.
JavaScript mit IntersectionObserver
Nun beobachten wir alle Elemente mit der Klasse animate.
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
});
elements.forEach((element) => {
observer.observe(element);
});
});Sobald ein Element sichtbar wird, erhält es die Klasse is-visible.
Dadurch wird die zuvor definierte CSS-Animation ausgelöst.
Animation nur einmal ausführen
In den meisten Fällen soll die Animation nur beim ersten Erscheinen stattfinden.
Dafür kann das Element nach der Animation aus dem Observer entfernt werden.
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
});
});
elements.forEach((element) => {
observer.observe(element);
});
});
0 Kommentare