【JS&CSS】画面スクロールで特定の領域をフワッと表示させる

<div class="space"></div>
<div class="box box-1">
  <p>スクロールでこの領域が50％表示されたとき、フワッと表示されます。</p>
  <p>（表示後はそのまま）</p>
</div>
<div class="space"></div>
<div class="box box-2">
  <p>スクロールでこの領域が50％表示されたとき、フワッと表示されます。</p>
  <p>（表示後はそのまま）</p>
</div>
<div class="space"></div>
<div class="box box-3">
  <p>スクロールでこの領域が50％表示されたとき、フワッと表示されます。</p>
  <p>（表示後はそのまま）</p>
</div>

.space {
  height: 800px;
}

.box {  
  height: 200px;
  line-height: 100px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .5s, transform .5s;
}

.box-1 {
  background: skyblue;
}

.box-2 {
  background: lime;
}

.box-3 {
  background: salmon;
}

.box.appear {
  opacity: 1;
  transform: translateY(0);
}

// 監視したい要素を取得
const boxes = document.querySelectorAll('.box');

// 要素が交差されたときの処理
const cb = function(entries, obs) {
  entries.forEach(entry => {

    // 要素の交差が終わったときは早期リターン
    if (!entry.isIntersecting) {
      return;
    }
    
    // 要素が50%交差したときにappearクラスを付与
    entry.target.classList.add('appear');

    // 引数に指定した要素の監視を止める
    obs.unobserve(entry.target);  
  });
}

const ops = {
  threshold: .5, // 100％表示されたときに実行される
};

const io = new IntersectionObserver(cb, ops);

// 引数には監視したい要素を渡す
boxes.forEach(box => {
  io.observe(box);
});