GSAP / Showcase
スクロール演出（多変種リビール）
IntersectionObserver で実装する5変種のスクロール出現。blur解除・clip-path・3D傾き・スケール・順送り。GSAPなしでも軽量に。
- IntersectionObserver
- CSS Transitions
- GSAP（任意）
Live Demo スクロールして変種を比較
fade-up シンプルなフェード上昇
blur ぼかし解除
clip クリップ展開
tilt 3D傾きから復元
scale スケール拡大
概要
スクロールに応じてコンテンツが現れる演出。
本サイトでは5変種を使い分けています。
- default ：下からフェードアップ
- blur ：ぼかし解除（見出し向け、最も「現れた感」が強い）
- mask ：clip-path で下から立ち上がる
- scale ：拡大しながらフェード（CTAセクション向け）
- tilt ：3D 斜め回転で入る
- stagger ：子要素を順送りで表示
すべて CSS Transition ベースで、JS は IntersectionObserver の数十行のみ。
GSAPなしで実装可能、ページ重量増加ゼロ。
技術要素
- IntersectionObserver
- CSS Transitions (filter / clip-path / transform)
- prefers-reduced-motion 完全対応
実装難易度
★（初級）
想定工数・費用感
- 工数：半日（4時間）
- 価格目安：¥30,000〜
サイト全体への適用込み。