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 und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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

6 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.

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.