Zurück

Inhaltselemente beim Scrollen animieren – Moderne Scroll-Animationen mit CSS und JavaScript

Avatar of Andre Lanius Andre Lanius - 31. August 2026 - CSS / SCSS, JavaScript - 3 minute read
Scroll Animationen

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

});

Das reduziert gleichzeitig den Ressourcenverbrauch, da bereits animierte Elemente nicht weiter überwacht werden.

Animation erst später starten

Mit dem Parameter threshold kann festgelegt werden, wann ein Element als sichtbar gilt.

const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible');
            }
        });
    },
    {
        threshold: 0.2
    }
);

Der Wert 0.2 bedeutet, dass etwa 20 Prozent des Elements sichtbar sein müssen, bevor die Animation ausgelöst wird.

Weitere Beispiele:

 

threshold: 0

 

Animation startet sofort.

 

threshold: 0.5

 

Animation startet erst, wenn ungefähr die Hälfte des Elements sichtbar ist.

Verschiedene Animationen unterstützen

Mit Datenattributen können unterschiedliche Animationen definiert werden.

HTML 

<section class="animate" data-animation="slide-up"> Inhalt </section>

CSS 

[data-animation="slide-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-animation="slide-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

Von links einblenden 

[data-animation="slide-right"] {
    opacity: 0;
    transform: translateX(-40px);
}

[data-animation="slide-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

Von rechts einblenden 

[data-animation="slide-left"] {
    opacity: 0;
    transform: translateX(40px);
}

[data-animation="slide-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

Von oben einblenden 

[data-animation="slide-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

[data-animation="slide-down"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

Verzögerung einbauen

Oft sieht es besser aus, wenn mehrere Elemente leicht zeitversetzt erscheinen.

HTML 

<div class="animate" data-animation="slide-up" data-delay="0">
    Element 1
</div>

<div class="animate" data-animation="slide-up" data-delay="150">
    Element 2
</div>

<div class="animate" data-animation="slide-up" data-delay="300">
    Element 3
</div>

Javascript 

const delay = element.dataset.delay || 0;

element.style.transitionDelay = `${delay}ms`;

Dadurch erscheinen die Elemente nacheinander.

Animationsdauer steuern

Auch die Dauer kann direkt über ein Datenattribut definiert werden.

HTML 

<div class="animate" data-animation="slide-up" data-duration="800">
    Inhalt
</div>

Javascript 

const duration = element.dataset.duration || 600;

element.style.transitionDuration = `${duration}ms`;

So lassen sich unterschiedliche Geschwindigkeiten verwenden, ohne zusätzliche CSS-Klassen anzulegen.

Komplette Lösung 

<section
    class="animate"
    data-animation="slide-up"
    data-delay="150"
    data-duration="600"
>
    <h2>Meine Überschrift</h2>

    <p>
        Dieser Inhalt wird animiert, sobald er sichtbar wird.
    </p>
</section>

Javascript 

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate');

    if (!elements.length) {
        return;
    }

    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) {
                    return;
                }

                const element = entry.target;

                const delay = element.dataset.delay || 0;
                const duration = element.dataset.duration || 600;

                element.style.transitionDelay = `${delay}ms`;
                element.style.transitionDuration = `${duration}ms`;

                element.classList.add('is-visible');

                observer.unobserve(element);
            });
        },
        {
            threshold: 0.2
        }
    );

    elements.forEach((element) => {
        observer.observe(element);
    });
});

CSS 

.animate {
    opacity: 0;
    transform: translateY(40px);

    transition-property: opacity, transform;
    transition-timing-function: ease;
}

.animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
0 comments  
New comment

0 comments