Mouse Parallax
マウスパララックス
どんな動き？
カーソルの位置に応じて、手前と奥のレイヤーがそれぞれ異なる量・向きで動くことで立体感を演出するアニメーション。マウスを動かすたびにレイヤー同士の位置関係が微妙にずれるため、写真や図解に奥行きが生まれる。プロダクトのヒーローセクションやポートフォリオサイトのインタラクティブな演出として使われる。
よく使う場所
ヒーロービジュアルポートフォリオプロダクト紹介
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Move several image layers by different amounts and directions in response to cursor position.Trigger:
mousemove over the container (hover).
Initial state:
All layers: translate: 0, 0
Animation:
Each layer translates a different distance and direction based on the cursor's offset from the container's center — background layers move less, foreground layers move more.
Final state:
Layers offset proportionally to cursor position; smoothly return to 0, 0 when the cursor leaves.
Timing:
duration: 0.3–0.6s per movement update, easing: ease-out.実装方法の候補
この動きは以下の技術で実装できます。
JavaScript (mousemove + transform)GSAP
別名・関連ワード
Cursor ParallaxMouse-move ParallaxInteractive Depth Layers