<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<div><img class="myImg" src="https://picsum.photos/id/1012/1200/500" alt="test image"></div>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<div><img class="myImg" src="https://picsum.photos/id/1013/1200/500" alt="test image"></div>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<div><img class="myImg" src="https://picsum.photos/id/1014/1200/500" alt="test image"></div>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>

<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
<p>Just scroll until image comes into view</p>
.myImg {
  width: 50%;
  hrighht: auto;
  border: 5px solid red;
  display: block;
  margin: auto;
  opacity: 0.2;
  transition: 5s ease 0.2s;
}
.myImg.active {
  opacity: 1;
}
(function observeElement(d) {
  "use strict";

  const allImages = d.querySelectorAll(".myImg");
  let options = {
    rootMargin: "0px",
    threshold: 0.2
  };

  function calculateVisibleDiv(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("active");
      } else {
        entry.target.classList.remove("active");
      }
    });
  }
  let observer = new IntersectionObserver(calculateVisibleDiv, options);

  allImages.forEach((myimg) => {
    observer.observe(myimg);
  });
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.