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