<section class="section__bg"><p>Section00</p></section>
<section class="section__bg section01"><p>Section01</p></section>
<section class="section__bg section02"><p>Section02</p></section>
<section class="section__bg section03"><p>Section03</p></section>

.section__bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 1.5rem;
  font-weight: bold;
  color: #111;
  background-color: #ddd;
  transition: .5s;
}

.section__bg.section01 {
  color: #111;
  background-color: #ddd;
}
.section__bg.section01.is-active {
  color: #ddd;
  background-color: #111;
}
.section__bg.section02 {
  color: #ddd;
  background-color: #111;
}
.section__bg.section02.is-active {
  color: #111;
  background-color: #ddd;
}
.section__bg.section03 {
  color: #111;
  background-color: #ddd;
}
.section__bg.section03.is-active {
  color: #ddd;
  background-color: #111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

const target = document.querySelectorAll('.section__bg')
const targetArray = Array.prototype.slice.call(target);

const options = {
  root: null,
  rootMargin: '0px 0px',
  threshold: .6
};

const observer = new IntersectionObserver(callback, options)
targetArray.forEach((targets) => {
  observer.observe(targets)
});

function callback(active) {
  active.forEach(function(entry, i) {
    const target = entry.target;
    if (entry.isIntersecting && !target.classList.contains('is-active')) {
      const delay = i * 100
      setTimeout(function(){
        target.classList.add('is-active');
      },delay);
      observer.unobserve(target);
    }
  });
};