こんにちは、雅です。

「Awwwards」や「FWS」などに掲載されているWebサイトでよく見かけるマウスインタラクションがあります。今回は表現の幅を広げるため、3つのマウスインタラクションを作ってみようと思います。

マウスストーカー

まずはマウスストーカーです。カーソルにポインターがついてくる表現です。

マウスカーソルの座標をmousemoveのe.clientXとe.clientYで取得し、requestAnimationFrameで再描画する度に動かしたい要素の位置を更新するのですが、そのままでは要素の左上がカーソルにくっついてしまいます。

要素の真ん中がカーソルにくっつくようにしたいので、e.clientXには動かしたい要素の幅の半分を、e.clientYには動かしたい要素の高さの半分を減算した値を要素に与えています。

また上記で求めた値をそのまま要素へ与えてしまうと常にカーソルにくっついた状態になります。

カーソルの動きからは少し遅れて滑らかにくっついてほしいので、gsapのutilsにあるinterpolateを使用します。

第一引数に始点(要素の現在地)を、第二引数には終点(カーソルの座標)を、第三引数には0から1までの値(緩急)を入れ、返ってきた値を要素に付与することでイージングのある動きになります。

カーソルを動かすとその方向を要素が見る表現

次にカーソルを動かすと要素がその方向を見る(その方向に少し引っ張られる)表現です。

こちらはマウスストーカーで書いた処理に少し変更を加えただけです。

今回はカーソル座標をgsapのutilsにあるmagRangeを使用して変換し、要素の動く範囲(量)を決めています。mapRangeは少しわかりにくいので例を挙げてみます。

gsap.utils.mapRange(-10, 10, 100, 200, 0);

上記だと150の値が返ってきます。

第五引数の0は第一引数の-10から第二引数の10までの範囲では真ん中の値になります。これを第三引数の100から第四引数の200までの範囲に変換すると100と200の真ん中は150なので、150が返ってくるということになります。

カーソルが要素に近づくとくっつこうとする表現

2個目に紹介したものの応用になります。カーソルが要素に近づくとくっつこうとし、離れると元の位置に戻る表現です。

カーソルが近づくと、と書きましたが実際はカーソルが要素にふれるとくっつき、要素から離れると元の位置に戻るという仕組みです。

mouseenterでカーソルが要素にふれているときにmousemoveした時のカーソル座標をmapRangeで変換し動かしています。mouseleaveしたときには元の位置へリセットされるようにしています。

最後に

3つのマウスインタラクションを作成しましたが、これらを組み合わせることでより表現の幅が広がると思いますので、ぜひご参考ください。