Parallax
パララックス
どんな動き？
スクロールに合わせて背景レイヤーと前景レイヤーの移動速度をずらすことで、奥行きや立体感を演出するアニメーション。手前の要素は速く、奥の要素はゆっくり動かすのが基本で、ヒーローセクションや世界観を見せたい導入部分でよく使われる。やりすぎると酔いやすいため速度差は控えめにするのが定番。
よく使う場所
ヒーローセクション背景演出ストーリー型ページ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Move background and foreground layers at different speeds as the user scrolls to create depth.Trigger:
Scroll position across the section containing the layered elements.
Start:
The section enters the viewport.
End:
The section leaves the viewport.
Behavior:
Background and foreground layers translate at different rates relative to scroll distance (e.g. background at 0.4x, foreground at 1x), creating a sense of depth.
Initial state:
Background layer: translateY: 0
Foreground layer: translateY: 0
Final state:
Background layer: translateY: -40px
Foreground layer: translateY: -120px実装方法の候補
この動きは以下の技術で実装できます。
CSS transform + scroll listenerGSAP ScrollTriggerCSS Scroll-driven Animations
別名・関連ワード
Parallax ScrollingLayered ScrollDepth Scroll