<div class="container">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint distinctio
      rerum blanditiis.</p>
    <img src="https://ljc-dev.github.io/hosted-assets/thumb-a.png" alt="avatar a">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
      molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint distinctio
      rerum blanditiis.</p>
  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

img {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1s, opacity 1s;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0px);
}

p {
  font-size: 2rem;
  margin: 2rem 0;
  width: 300px;
}

const img = document.querySelector("img")

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}

const options = {}

const myObserver = new IntersectionObserver(callback, options)

myObserver.observe(img)