遠近感を味わえるマウスインタラクションを作ってみた！

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダー Day4です！

昨日は「ステップバイステップ AWS Amplify GraphQL API」という記事でした。

ステップバイステップ AWS Amplify GraphQL API

本日は「遠近感を味わえるマウスインタラクションを作ってみた！」という記事を書いてきます！

完成形を確認

下記のようにマウスに合わせて遠近感を演出するインタラクションを作っていきます！

See the Pen
bagelee-01-mouseInteraction by palan-sasai (@palan-sasai)
on CodePen.

このインタラクションの参考にしたサイトは下記の2つです！
・Page not found · GitHub
・オーバーウォッチ 2

実装に必要なものを整理

まずは完成形を見つつ実装に必要なものを整理していきましょう！

完成形のようにDOM操作を実装する際は、
「必要な要素」と「必要な処理」の2つを整理すると
何を調べて実装を進めれば良いかの指針となりハマることが少なくなります！

それでは整理してみましょう！！

必要な処理 = いつ、なにを、どうするなど
(いつ) マウスが動いたときに
(なにを) 画像を
(どうする) マウスに連動させて動かす
(その他) レイヤーが上のものは大きく動き、レイヤーが下のものは小さく動く

必要な要素 = テキスト、画像、必要な処理に使用する値など
・画像
・画像の位置座標
・マウスの位置座標

ここまでできたら、実装に入っていきます！

いざ実装！

1. マークアップ

まずは、HTMLとCSSで要素を置いていきます。

See the Pen
bagelee-01-mouseInteraction_01 by palan-sasai (@palan-sasai)
on CodePen.

CSSで .main_list_item の初期位置を指定して、
最終的にJavaScriptでその中身のimg要素にスタイルとして transform: translate(●px, ●px); を指定し、移動させます。

2. DOM要素とその他情報を取得

つづいて、JavaScriptでDOM要素を取得します。

See the Pen
bagelee-01-mouseInteraction_02 by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 7行目
IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita

3. 画像の位置座標を取得し配列へ格納

つづいて、JavaScriptで画像の位置座標を取得し配列へ格納します。

また、位置座標は -1.0 〜 1.0 の範囲になるように調整します。

See the Pen
bagelee-01-mouseInteraction_03 by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 9行目
【JavaScript】桁指定して四捨五入・切り上げ・切り捨て

・JavaScript (Babel) 24, 25, 26行目
要素の位置座標を取得する方法

4. マウスの位置座標を取得

つづいて、JavaScriptでマウスの位置座標を取得します。

マウスの位置座標は mousemove イベントの中で取得できます。

See the Pen
bagelee-01-mouseInteraction_04 by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 44, 45行目
マウスカーソルの座標を取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

5. マウスを動かすたびに要素も移動

いよいよ画像を動かします！

See the Pen
bagelee-01-mouseInteraction_05 by palan-sasai (@palan-sasai)
on CodePen.

これで完成です！

まとめ

今回の完成形にリサイズ処理などを追加してクオリティを上げていけば、案件へ流用できるかもしれません…！
表現のストックの1つとしていかがでしょうか？

また、マウスの位置座標を取得していろんな値に変換できれば、表現の幅が広がること間違いなしです！
もっと素敵な表現があるので、活用事例からみるマウスインタラクション も是非参考にしてみてください！