• 操作
  • 画像ホバー

#image hover 005

ホバーした位置に応じて画像が立体的に動く

参考サイトURL
動きの解説

カーソルの位置に合わせて画像が傾いたり移動したりするパララックス(視差)効果は、Web空間に奥行きと浮遊感を与えます。ユーザーの操作に画面が有機的に反応するため、没入感が高く、ポートフォリオや特設サイトで好まれます。JavaScriptでマウスの動き(XY座標)を取得し、transform: perspectiveとrotate3dを計算して適用します。動きが激しすぎると「画面酔い」を誘発するため、変化量を控えめに抑え、滑らかな減速処理を入れる配慮が必要です。