👁️ Intersection Observer — Element Dikha Ya Nahi

<!-- Lazy load images -->
<img data-src="heavy-image.jpg" alt="Lazy loaded" class="lazy">

<script>
const lazyImages = document.querySelectorAll("img.lazy");

const imageObserver = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  },
  { rootMargin: "100px" }
);

lazyImages.forEach(img => imageObserver.observe(img));
</script>

<!-- Infinite scroll -->
<div id="sentinel"></div>
<div id="content"></div>

<script>
let page = 1;

const sentinelObserver = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadMoreContent();
    }
  },
  { rootMargin: "200px" }
);

sentinelObserver.observe(document.getElementById("sentinel"));

async function loadMoreContent() {
  const res = await fetch(`/api/items?page=${page}`);
  const data = await res.json();
  data.items.forEach(item => {
    document.getElementById("content").innerHTML += `
      <div class="item">${item.name}</div>`;
  });
  page++;
}
</script>

<!-- Scroll animation -->
<div class="animate-on-scroll">Content</div>

<script>
const animateObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        animateObserver.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.2 }
);

document.querySelectorAll(".animate-on-scroll").forEach(el => {
  animateObserver.observe(el);
});
</script>

/* CSS */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}