JavaScript IntersectionObserverを使ってみた

const setShowSectionObserver = () => {
  // 監視対象の要素が表示領域に入った時もしくは表示領域から出た時に行う処理
  const showSection = (entries, observer) => {
    // アニメーションをかけて変更する内容
    const keyframes = {
      opacity: [0, 1],
      translate: ["0 50px", 0],
    };

    entries.forEach(element => {
      // 要素が表示領域に少しでも入ったら時に処理する
      if (element.intersectionRatio > 0) {
        // 監視を止める
        observer.unobserve(element.target);
        // アニメーション開始
        element.target.animate(keyframes, 800);
      }
    })
  };

  // Observer作成
  const sectionObserver = new IntersectionObserver(showSection);
  // classにsection-containerを設定している要素を全て取得する
  const sections = document.querySelectorAll(".section-container");
  sections.forEach(section => {
    // 監視対象に1つずつ登録
    sectionObserver.observe(section, 1000);
  });
};

setShowSectionObserver();