スクロールでふわっと表示【IntersectionObserver】

👀 実行デモ

💡 このテンプレートの使い道とメリット

このテンプレートは,要素がスクロールによって表示領域に入ったときに「ふわっ」と表示されるアニメーションを実装します。

• ✅ ユーザーの視線を自然に誘導できる（見逃されにくい）
• ✅ ページ全体を一度に表示しないことで,読みやすさが向上
• ✅ IntersectionObserver を使うことで,画像やグラフなどの「遅延読み込み」も可能
• ✅ 軽量＆柔軟にカスタマイズできるため,LPや商品一覧,FAQなどに最適
• ✅ 「ふわっと出てくる」だけでもページの印象がグッと良くなる

アニメーションのスピードや距離は CSS で簡単に調整できるため,自分好みに変更して楽しむことも可能です。

📋 コピペ用コード

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
  font-size: 1.5rem;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Apple</div>
<div class="box fadein">🍊 Orange</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Grape</div>
<div class="box fadein">🍉 Watermelon</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // 一度だけ表示したい場合
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>
      
      📋 コピー
      

🧩 IntersectionObserver の仕組みと実装のコツ

IntersectionObserver は、特定の要素がビューポート内に現れたかどうかを監視できるブラウザAPIです。従来の scroll イベントに比べて軽量かつ高性能で、アニメーションの最適化に役立ちます。

🔍 どんな場面で使える？

スクロールに連動した表示効果だけでなく、画像や動画の遅延読み込み、広告バナーの表示トリガーなど、さまざまな場面で応用されています。

⚙ 実装時の注意点

パフォーマンスを維持するため、表示が完了した要素は unobserve() で監視解除するのがポイントです。また、複数の要素に対して繰り返し使う場合は querySelectorAll() でループ処理を行います。

アニメーションと組み合わせることで、ユーザーの視覚的満足度が大きく向上します。CSSによる transform や transition の調整も忘れずに行いましょう。