javascript: fade in on scroll?

Wie kann ich auf meiner website die Bilder "einfaden" lassen?

Danke schonmal, für alle die Helfen wollen :))

Answer 1

[FaTech]

Setze die Bilder Standardmäßig auf opacity: 0; und dann erstelle eine Klasse:

.fadeIn {
  opacity: 1;
  transition-duration: 1s;
}

Nun brauchst du noch einen Scroll Event Listener:

window.addEventLister("HIER_DAS_EVENT", function(e) {
  if(IN_VIEWPORT)
  {
    element.classList.add("fadeIn");
  }
});

Scroll Events gibt es mehrere, ich empfehle:
scroll, wheel, touchmove

Wie man den Viewport berechnet findest du auf Google, z.B.:
https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport