Intersection Observer examples

fade-in-out-effect.js

// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
const options = {};
const observer = new IntersectionObserver((entries, self) => {
  entries.forEach(({isIntersecting, target}) => {
    target.classList.toggle('show', isIntersecting);
  })
}, options);

document.querySelectorAll('.hidden').forEach(target => observer.observe(target));

// CSS //////////////////////
section {
  min-height: 100vh;
}
.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-50%); 
  transition: all 2s;
  transition-delay: calc(200ms * var(--order, 0));
}
@media(prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}
.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

// HTML //////////////////////

<section style="--order: 1" class="hidden">ONE</div>
<section style="--order: 2" class="hidden">TWO</div>
<section style="--order: 3" class="hidden">THREE</div>

lazyimg-IntersectionObserver.js

document.querySelectorAll('img[data-src]').forEach((el, i) => {
  const observer = new window.IntersectionObserver(function(entries, self) {
    const {isIntersecting, target} = entries[0]
    if (isIntersecting) {
      const img = target
      const src = img.getAttribute('data-src')
      if (src) img.src = src
      self.unobserve(img)
    }
  }, {})
  observer.observe(el)
})

///////////// MORE EFFICIENT: A SINGLE OBSERVER! (with config) //////////////

function observeImages(
  config = {
    rootMargin: '0px 0px 50px 0px',
    threshold: 0
  },
  attr = 'data-src'
) {
  const observer = new IntersectionObserver((entries, self) => {
    entries.forEach(({isIntersecting, target}) => {
      if (isIntersecting) {
        const img = target
        const src = img.getAttribute(attr)
        if (src) img.src = src
        self.unobserve(img)
      }
    })
  }, config)
  
  //document.querySelectorAll(`img[${attr}]`).forEach(imgEl => observer.observe(imgEl))
  document.querySelectorAll(`img[${attr}]`).forEach(observer.observe)
  
  return observer
}

const imgObserver = observeImages()

registerIntersectionObserver.js

function registerIntersectionObserver(el, cb, config = {}, parent = window) {
  const observer = new parent.IntersectionObserver(function (entries, self) {
    if (entries[0].isIntersecting) cb(self)
  }, config)
  observer.observe(el)
  return observer
}

document.querySelectorAll('img').forEach((imgEl, i) => {
  const obs = registerIntersectionObserver(imgEl, (self) => {
    console.log(i, imgEl.src)
    obs.disconnect()
  })
})

registerIntersectionObserverPromise.js

async function registerIntersectionObserver(el, config = {}, parent = window) {
  return new Promise(res => {
    const observer = new parent.IntersectionObserver(function (entries) {
      if (entries[0].isIntersecting) res(observer)
    }, config)
    observer.observe(el)
  })
}

document.querySelectorAll('img').forEach(async (imgEl, i) => {
  const observer = await registerIntersectionObserver(imgEl, {threshold: [0.1]})
  observer.disconnect()
  console.log(i, imgEl.src)
})

fade-in-out-effect.js sourced from: https://www.youtube.com/watch?v=T33NN_pPeNI