スクロールアニメーション完全ガイド — IntersectionObserverの使い方

実装手段の選択肢

IntersectionObserver — ブラウザネイティブAPI。要素が画面に入ったか出たかを監視。軽量で標準的な選択肢。

GSAP ScrollTrigger — 業界標準の高機能ライブラリ。複雑なタイムライン制御が可能。商用利用は要ライセンス。

CSS scroll-driven animations — 2024年以降のChrome/Edgeでサポート開始の最新仕様。JS不要で実装可能だが対応ブラウザは限定的。

Lenis（スムーススクロール） — スクロールそのものをなめらかにする補助ライブラリ。

用途に応じて使い分けるのがプロの選択。シンプルなフェードインなら IntersectionObserver、複雑なスクロールテリングなら GSAP。

IntersectionObserver の基本

const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.2 });

document.querySelectorAll('.fade-in').forEach(el => obs.observe(el));

threshold で「何%見えたら発火するか」を制御。0.2 なら 20% 見えた時。

詳細実装は Scroll Trigger ページを参照。

パララックス（視差）スクロール

背景・中景・前景が異なる速度で動く演出。映画的・没入感が出る。

window.addEventListener('scroll', () => { const y = window.scrollY; element.style.transform = \translateY(\${y * 0.3}px)\; });

0.3〜0.5倍速の差で十分に視差効果が出る。やりすぎると酔いを誘発するので注意。

詳細実装：Parallax Scroll

Sticky Section（張り付き演出）

セクションがスクロールに合わせて画面上部に張り付き、次のセクションに押し出される演出。

純粋なCSSで実装可能：.section { position: sticky; top: 0; height: 100vh; }

Apple や Stripe の LP で多用される高級感のあるテクニック。

実装：Sticky Sections

Horizontal Scroll（縦スクロールを横移動に）

ユーザーは縦にスクロールするが、画面上は横方向にコンテンツが流れる演出。ポートフォリオで人気。

CSS scroll-snap-type: x mandatory + JS wheel イベント転送で実装。

実装：Horizontal Scroll