Intersection Observer API(targetの情報)

 const target = document.querySelector('img');

  function callback(entries) {
    console.log(entries[0]);
  }

  const options = {
    threshold: 0.2,
  };

  const observer = new IntersectionObserver(callback, options);

  observer.observe(target);

・functionの引数を設定することで情報を受け取ることができる。
・引数は配列扱いになり、con~()で配列のように受け取る。

【中身】
・intersectionRatioはrootが何%交差しているか。
・isIntersectingは交差しているか。真偽値

実践(rootに交差したらふわっと出てくる)

cssでは、、、

img {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
}

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

JSは上と一緒である。
次に、JSとCSSと関連付ける。

 const target = document.querySelector('img');

  function callback(entries) {
    console.log(entries[0]);

    if (!entries[0].isIntersecting) {
      return;
    }

    entries[0].target.classList.add('appear');

    // if (entries[0].isIntersecting) {
    //   entries[0].target.classList.add('appear');
    // } else {
    //   entries[0].target.classList.remove('appear');
    // }
  }

  const options = {
    threshold: 0.2,
  };

  const observer = new IntersectionObserver(callback, options);

  observer.observe(target);

・intersecting()は交差した時に、tureかfalseかを判断する。
・ifの上はtureの時、下はfalseの時。
・交差終わる時にはアニメーション取りたくない。
if()のelseを消すか、!をつけてlfalseにする。
falseだったらすぐにreturnする。→何もしないで返す。