要素を監視して画面に入ったらふわっと表示させるスクロールアニメーション

// IntersectionObserver を作成
const observer = new IntersectionObserver((entries) => {
  entries.forEach(function (entry) {
    // 要素がビューポートに入った場合
    if (entry.isIntersecting) {
      // 表示属性を付与
      entry.target.setAttribute("data-visible", "true");

      // 一度監視したら、対象要素の監視を停止（必要に応じてコメントアウト）
      observer.unobserve(entry.target);
    } else {
      // ビューポートから外れたら非表示属性を付与
      entry.target.setAttribute("data-visible", "false");
    }
  });
});

// 監視要素
const viewElements = document.querySelectorAll(".js-in-view");
viewElements.forEach(function (el) {
  // 各要素をオブザーバーで監視
  observer.observe(el);
});

const options = {
  root: null, // ビューポートをルートとして使用
  rootMargin: "-10% 0%", // 交差の有効範囲をpx % で指定
  threshold: 0, // 要素が何割見えたら発火するかを指定（最小0.0〜最大1.0）
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      entry.target.setAttribute("data-visible", "true");

      // 一度監視したら、対象要素の監視を停止（必要に応じてコメントアウト）
      observer.unobserve(entry.target);
    } else {
      entry.target.setAttribute("data-visible", "false");
    }
  });
}, options);

const viewElements = document.querySelectorAll(".js-in-view");
viewElements.forEach(function (el) {

  observer.observe(el);
});

<div class="js-in-view fadeInUp" data-delay=".25s" data-duration="1s">

const options = {
  root: null, // ビューポートをルートとして使用
  rootMargin: "-10% 0%", // 交差の有効範囲をpx % で指定
  threshold: 0, // 0〜1の割合で要素が可視になった時にコールバックを発火
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      entry.target.setAttribute("data-visible", "true");

      // 一度監視したら、対象要素の監視を停止（必要に応じてコメントアウト）
      observer.unobserve(entry.target);
    } else {
      entry.target.setAttribute("data-visible", "false");
    }
  });
}, options);

const viewElements = document.querySelectorAll(".js-in-view");
viewElements.forEach(function (el) {

  // delayの上書き
  const delay = el.getAttribute("data-delay");
  if (delay) {
    el.style.animationDelay = delay;
  }

  // durationの上書き
  const duration = el.getAttribute("data-duration");
  if (duration) {
    el.style.animationDuration = duration;
  }

  observer.observe(el);
});

/* スクロールアニメーション
----------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

// デフォルトのアニメーション設定
[data-visible] {
  animation-fill-mode: both;
  animation-duration: 2s;
}

// フェードイン系はあらかじめ非表示にしておく
.fadeIn,
.fadeInUp {
  opacity: 0;

  &[data-visible="true"] {
    opacity: 1;
  }
}

// アニメーション指定
[data-visible="true"] {
  &.fadeInUp {
    animation-name: fadeInUp;
  }
}

// JSが効かない時のフォールバック（フェードイン系を強制表示）
@keyframes visible {
  to {
    opacity: 1;
    visibility: visible;
  }
}
:not([data-visible]).fadeInUp {
  animation-name: visible;
  animation-fill-mode: forwards; // 最後のキーフレームを保持
  animation-duration: 1s;
  animation-delay: 1s;
}

<div class="js-in-view fadeInUp" data-delay=".25s" data-duration="1s">