IntersectionObserverでスクロール表示アニメーションを作る実践例【JS軽量・実務向け・コピペOK】

<section class="block fade-up">
  <h2>見出しテキスト</h2>
  <p>スクロールで表示されます。</p>
</section>

<section class="block fade-left">
  <h2>カード表示</h2>
  <p>横からスライドします。</p>
</section>

<section class="block zoom-in">
  <h2>CTAエリア</h2>
  <p>ズームで表示されます。</p>
</section>

.block {
  margin: 120px auto;
  max-width: 700px;
  padding: 40px;
  background: #f5f5f5;
}

/* 初期状態 */
.fade-up,
.fade-left,
.zoom-in {
  opacity: 0;
  transition: all 0.8s ease;
}

/* 各アニメーション */
.fade-up {
  transform: translateY(40px);
}

.fade-left {
  transform: translateX(-40px);
}

.zoom-in {
  transform: scale(0.9);
}

/* 表示状態 */
.is-show {
  opacity: 1;
  transform: none;
}

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));

threshold: 0.2

rootMargin: "0px 0px -15% 0px"

unobserve()

threshold: 0.1

transform: translateY(80px);

.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }