• 操作
  • エリアホバー

#area hover 028

マウスの進入角度に連動する画像スライドイン

参考サイトURL
動きの解説

エリアにマウスオーバーした際、カーソルが進入してきた方向(上下左右)に応じて、画像がスライドインするように出現するインタラクションです。ユーザーの細かなアクションがダイレクトに画面へ反映されるため、サイトとの一体感や高いエンタメ性を生み出すことができます。ポートフォリオや、遊び心を取り入れたい特設サイトに最適です。実装はJSで要素に対するカーソルの進入角度を計算し、それに応じたアニメーション方向を動的に制御します。