IntersectionObserverでスクロールアニメーション

    <div class="l-container">
      <section class="p-section">
        <div class="p-section__contents">
          <div class="p-section__block js-fade">
            <div class="p-section__img">
            </div>
            <div class="p-section__textBox">
              <h2>タイトルタイトル</h2>
              <p>テキストテキスト</p>
            </div>
          </div>
          <div class="p-section__block js-fade">
            <div class="p-section__img">
            </div>
            <div class="p-section__textBox">
              <h2>タイトルタイトル</h2>
              <p>テキストテキスト</p>
            </div>
          </div>
        </div>
      </section>
      <section class="p-section">
        <div class="p-section__contents">
          <div class="p-section__block js-fade">
            <div class="p-section__img">
            </div>
            <div class="p-section__textBox">
              <h2>タイトルタイトル</h2>
              <p>テキストテキスト</p>
            </div>
          </div>
        </div>
      </section>
      <section class="p-section">
        <div class="p-section__contents">
          <div class="p-section__block js-fade">
            <div class="p-section__img">
            </div>
            <div class="p-section__textBox">
              <h2>タイトルタイトル</h2>
              <p>テキストテキスト</p>
            </div>
          </div>
          <div class="p-section__block js-fade">
            <div class="p-section__img">
            </div>
            <div class="p-section__textBox">
              <h2>タイトルタイトル</h2>
              <p>テキストテキスト</p>
            </div>
          </div>
        </div>
      </section>
    </div>

.p-section {
  padding: 100px 80px;
  background-color: lightcyan;
}

.p-section:nth-child(odd) {
  background-color: lightblue;
}

.p-section__contents {
  text-align: center;
}

.p-section__block {
  display: flex;
  justify-content: center;
}

.p-section__img {
  margin-right: 20px;
  width: 400px;
  height: 300px;
  background-color: red;
}


.p-section__block {
  transition: transform .8s, opacity .8s;
  transform: translateY(50px);
  opacity: 0;
}

.p-section__block + .p-section__block {
  margin-top: 20px;
}



.p-section__block.is-active {
  transform: translateY(0);
  opacity: 1;
}

document.addEventListener('DOMContentLoaded', () => {

  const fadeTargets = document.querySelectorAll(".js-fade");

  function targets(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-active");
      }
    });
  }

  const options  = {
    root: null,
    rootMargin: "-10% 0px",
    threshold: 0
  };


  const fadeObserve = new IntersectionObserver(targets, options);

  fadeTargets.forEach((target) => {
    fadeObserve.observe(target);
  });

});