← Disegno-K トップ ← サンプル集 ← 解説記事

IntersectionObserver スクロール表示デモ

画面内に入った要素だけ軽量にアニメーション表示します

下からフェード表示

スクロールして表示領域に入ったタイミングで、下からふわっと表示されます。

カードの時間差表示

カードA

カードB

カードC

左からスライド表示

クラスを変えるだけで別方向のアニメーションも作れます。

ズーム表示

CTAや強調ブロックに向いています。

JavaScript コード（使用部分）

const targets = document.querySelectorAll(
 '.fade-up, .fade-left, .zoom-in'
);

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show');
      obs.unobserve(entry.target);
    }
  });
},{
  root: null,
  rootMargin: "0px 0px -15% 0px",
  threshold: 0.2
});

targets.forEach(el => observer.observe(el));

]