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

scroll.css

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

.visible {
  opacity: 1;
}

scroll.html

<div class="mein-element"></div>
<div class="mein-element"></div>
 …
<div class="mein-element"></div>

scroll.js

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 Sc

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

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.

Source: https://blog.kulturbanause.de/2016/09/scrolling-effekte-css-klasse-viewport/