Scrolling-Effekte: CSS-Klasse per JavaScript hinzufügen, wenn sich ein Element im Viewport befindet

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.

Beispiel anschauen

<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

Beispiel anschauen

.mein-element {
   opacity: 0;
   transition: opacity .5s ease-in-out;
} 

.visible {
   opacity: 1; 
}

Eine geringe Anpassung am CSS-Code lässt die Elemente abwechselnd von links und rechts einfahren und einfaden.

Beispiel anschauen

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. Markus
    schrieb am 10.11.2022 um 11:39 Uhr:

    Hallo,

    darf man den Script auch für kommerzielle Seiten einsetzen? Erwähnung im Impressum bzw. im Quelltext zwecks Quellenangaben?

    Grüße

    Markus

    Antworten
    • Jonas Hellwig
      schrieb am 14.11.2022 um 08:30 Uhr:

      Du kannst es einfach verwenden. Eine Quellenangabe o.ä. ist nicht nötig.

      Antworten
  2. Fabrice
    schrieb am 22.02.2022 um 18:25 Uhr:

    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

    Antworten
  3. Martin
    schrieb am 23.02.2020 um 12:05 Uhr:

    Hallo,
    der eventlistener „scroll“ soll den browser ziemlich fordern, sollte man das berücksichtigen, also gibt es alternativen?

    Antworten
  4. Müller Andreas
    schrieb am 27.11.2019 um 06:39 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 03.12.2019 um 13:07 Uhr:

      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.

      Antworten
      • Joachim Schaupp
        schrieb am 13.11.2020 um 19:55 Uhr:

        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.

  5. Dominik Heer
    schrieb am 05.09.2018 um 12:36 Uhr:

    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?

    Antworten
    • Jonas Hellwig
      schrieb am 09.09.2018 um 19:40 Uhr:

      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.

      Antworten
  6. Thomas
    schrieb am 06.12.2016 um 21:00 Uhr:

    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?

    Antworten
    • Stefan
      schrieb am 02.03.2017 um 13:51 Uhr:

      Mit Java schonmal garnicht. Wenn dann wohl JavaSCRIPT

      Antworten
  7. Franz Meyer
    schrieb am 13.09.2016 um 16:09 Uhr:

    Schön, hier mal wieder einen neuen Artikel zu lesen und dann noch so einen interessanten! Vielen Dank

    Antworten
  8. Flo
    schrieb am 09.09.2016 um 10:07 Uhr:

    In Zukunft mit dem IntersectionObserver wird das noch interessanter: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →