revealingElementsOnScroll.md

[JavaScript] - Revealing Elements on Scroll - Intersection Observer API

SOURCE

<section class="section" id="section--1">
// ...
</section>

<section class="section" id="section--2">
// ...
</section>

<section class="section" id="section--3">
// ...
</section>

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

const allSections = document.querySelectorAll('.section');

const revealSection = function (entries, observer) {
  const [entry] = entries;

  if (!entry.isIntersecting) return;

  entry.target.classList.remove('section--hidden');
  observer.unobserve(entry.target);
};

const sectionObserver = new IntersectionObserver(revealSection, {
  root: null,
  threshold: 0.15,
});

allSections.forEach(function (section) {
  sectionObserver.observe(section);
  section.classList.add('section--hidden');
});