IntersectionObserver API Test

ブラウザのコンソールを開き、[開始]ボタンを押してください。

緑の四角が画面(viewport)から出た時と、入ってきた時 (厳密にはオプションで指定した [0, 0.5, 1] の3つのタイミング) にコールバックが呼ばれ、intersectionRatio(要素がどれくらい見えているか) の値が出力されます。

JavaScript コード

window.addEventListener('load', () => {
  const elm = document.querySelector('#box1');

  document.addEventListener('click', () => {
    (new TimelineMax())
      .to(elm, 1, { x:  400, backgroundColor: 'green', opacity: 1 })
      .to(elm, 2, { y: -400, backgroundColor: 'green', opacity: 1 })
      .to(elm, 1, { x:    0, backgroundColor: 'green', opacity: 1 })
      .to(elm, 2, { y:    0, backgroundColor: 'green', opacity: 1 });
  });

  const io = new IntersectionObserver(
    entries => {
      //console.log(entries);
      console.log(entries[0].intersectionRatio);
    },
    {
      threshold: [0, 0.5, 1]
    }
  );
  // Start observing an element
  io.observe(elm);
});

参考