Scroll Zoom
スクロールズーム
どんな動き？
スクロール量に応じて画像の拡大率が連続的に変化するアニメーション。ページ上部では画像が小さく、下にスクロールするほど画面いっぱいに拡大していくような使い方が代表的で、プロダクト紹介や写真集的なページで没入感を高める演出として使われる。
よく使う場所
プロダクトビジュアル写真ギャラリーヒーロー画像
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Scale an image up in direct proportion to scroll progress through its section.Trigger:
Scroll position within the image's section range.
Start:
0% scroll progress — image at base scale.
End:
100% scroll progress — image at maximum scale.
Behavior:
The image's scale tracks scroll progress directly, growing larger the further the user scrolls through the range, and shrinking back if they scroll up.
Initial state:
scale: 1
Final state:
scale: 1.35実装方法の候補
この動きは以下の技術で実装できます。
GSAP ScrollTrigger (scrub: true)CSS Scroll-driven Animations
別名・関連ワード
Scroll-linked ZoomZoom on ScrollScroll Scale Image