kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

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

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.

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

9 Kommentare

  1. Flo

    Verfasst am 9. September 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

  2. Franz Meyer

    Verfasst am 13. September 2016 um 16:09 Uhr.

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

  3. Thomas

    Verfasst am 6. Dezember 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?

    • Stefan

      Verfasst am 2. März 2017 um 13:51 Uhr.

      Mit Java schonmal garnicht. Wenn dann wohl JavaSCRIPT

  4. Dominik Heer

    Verfasst am 5. September 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?

    • Jonas Hellwig

      Verfasst am 9. September 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.

  5. Müller Andreas

    Verfasst am 27. November 2019 um 6: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

    • Jonas Hellwig

      Verfasst am 3. Dezember 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.

  6. Martin

    Verfasst am 23. Februar 2020 um 12:05 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.