Scrolling-Effekte: CSS-Klasse per JavaScript hinzufügen, wenn sich ein Element im Viewport befindet
Mit Hilfe von JavaScript könnt ihr abfragen, ob sich ein Element im Viewport befindet und in diesem Fall eine CSS-Klasse hinzufügen. Mit CSS können die Elemente dann animiert werden, sobald sie in den sichtbaren Bereich scrollen.

Scrolling-Effekte sind ein beliebtes Gestaltungsmittel auf modernen Websites. Sinnvoll eingesetzt können Sie dazu beitragen, dass eine Website gleichermaßen erfolgreich als auch ästhetisch ansprechend ist. In diesem Beitrag findet ihr ein JavaScript-Snippet, mit dem Elemente eine CSS-Klasse erhalten, sobald Sie sich im Viewport befinden. Die Klasse kann optional wieder entfernt werden, sobald sich das Element nicht mehr vollständig im Viewport befindet.
Das JavaScript für den Scrolling-Effekt
Das folgende JavaScript fügt einem Element mit der CSS-Klasse .mein-element
zusätzlich die Klasse .visible
hinzu, wenn das Element vollständig im Viewport sichtbar ist. Die else
-Bedingung innerhalb des JavaScripts kann entfernt werden, um die CSS-Klasse nur hinzuzufügen, aber nicht wieder zu entfernen.
<div class="mein-element"></div>
<div class="mein-element"></div>
…
<div class="mein-element"></div>
function isElementInViewport(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
var elements = document.querySelectorAll(".mein-element");
function callbackFunc() {
for (var i = 0; i < elements.length; i++) {
if (isElementInViewport(elements[i])) {
elements[i].classList.add("visible");
}
/* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
else {
elements[i].classList.remove("visible");
}
}
}
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
.mein-element {
background:red;
height:50vh;
max-width: 500px;
margin:0 auto;
margin-bottom:2em;
}
.visible {
background: lime;
}
Elemente beim Scrollen einfaden
Mit ein wenig CSS kann nun sehr einfach ein Fade-In-Effekt hergestellt werden
.mein-element {
opacity: 0;
transition: opacity .5s ease-in-out;
}
.visible {
opacity: 1;
}
Elemente abwechselnd von links und rechts einfahren lassen
Eine geringe Anpassung am CSS-Code lässt die Elemente abwechselnd von links und rechts einfahren und einfaden.
.mein-element {
opacity: 0;
transition: all .25s ease-in-out;
}
.mein-element:nth-of-type(odd) {
transform: translateX(-90%);
}
.mein-element:nth-of-type(even) {
transform: translateX(90%);
}
.mein-element.visible {
transform:translateX(0);
opacity: 1;
}
Hallo,
darf man den Script auch für kommerzielle Seiten einsetzen? Erwähnung im Impressum bzw. im Quelltext zwecks Quellenangaben?
Grüße
Markus
Du kannst es einfach verwenden. Eine Quellenangabe o.ä. ist nicht nötig.
Hey Jonas. Danke für den Code. Ein wichtiger Hinweis für alle, bei denen es nicht funktioniert [wie bei mir zuerst]: Der Javascript-Code muss unter dem DIV-Tag stehen und nicht im HEAD-Bereich. Habe lange gesucht warum, es nicht klappt, bis ich besagte Reihenfolge angepasst habe :-) Nicht ganz unwichtig und good to know… Cheers Fabrice
Hallo,
der eventlistener „scroll“ soll den browser ziemlich fordern, sollte man das berücksichtigen, also gibt es alternativen?
Hallo kulturbanause team
Schönes tool .läuft prima .
wie kann ich es abändern, daß das nachladen etwas vor dem sichtfeld geschieht ??
wäre um eine Antwort sehr dankbar
Hallo Andreas,
ich beziehe mich auf das 1. Beispiel dieses Artikels. Schreib mal
rect.bottom - 500 <= (window.innerHeight …
, dann sollte das Element 500 Pixel früher die richtige Klasse erhalten und einblenden.Bei relativ kurzen Texten funktioniert das wunderbar, nur wenn der Text um ein vielfaches länger als das Browserfenster ist, funktioniert es leider überhaupt nicht mehr. Was muss man ändern, damit das Element auch eingeblendet wird wenn es nicht vollständig im Viewport sichtbar ist, da es einfach zu lang ist.
Hallo,
ich suche genau nach dieser Funktion. Ich will Div-Container rein zoomen lassen oder einfaden.
Ich habe alles so wie es hier steht in die entsprechenden Dateien kopiert und in der HTML Datei die CSS und Java Script Datei verlinkt. Ich bekomme die Rechtecke angezeigt aber es finden keine Animationen statt.
Fehlt noch etwas?
Eigentlich nicht. Wenn das Beispiel von uns im gleichen Browser funktioniert, kannst du Inkompatibilitäten ausschließen. Da es auch keine Abhängigkeiten zu Frameworks wie jQuery o.ä. gibt, muss sich in deinem Code irgendwo ein Fehler eingeschlichen haben.
Möchte sowas hier umsetzen, die Veränderung im Header beim scrollen:
http://www.redtherm.de/produkte/infrarotheizungen/informationen.html
Geht das nur über Java? Oder lässt sich sowas auch mit CSS umsetzen, ohne Java?
Mit Java schonmal garnicht. Wenn dann wohl JavaSCRIPT
Schön, hier mal wieder einen neuen Artikel zu lesen und dann noch so einen interessanten! Vielen Dank
In Zukunft mit dem IntersectionObserver wird das noch interessanter: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API