ホバーでびっくり！
マウスカーソル追従アニメーション！

すっかり夏の暑さになりましたね。いかがお過ごしでしょうか。
さて、本日は、「マウスカーソルをカスタマイズする」というテーマです！
マウスカーソルの表示を変更するものとして、CSSでは、「cursor」というプロパティを用いることができます。
今回はこのプロパティからもう一歩踏み込んで、マウスの動きに追従するアニメーションを用いたカーソルのカスタマイズをご紹介いたします。

実際の動き

何はともあれ、まずは体験していただきたいと思います。以下のボタンの上へマウスカーソルを移動させてみてください。

カーソルの下から、円がニュッと現れたかと思います。
今回はこのように、マウスカーソルに新しい要素を追従させるような、マウスカーソルのカスタマイズをご説明いたします。

基本的な考え方〜準備

仕組みはとてもシンプルです！
まず、追従する要素を用意します。この要素は、今回のサンプルでは「cursor」というクラスが付与されたdiv要素です。
この要素は、お好きなようにカスタマイズしてください。

要素が準備できたら、次は追従させるための下準備をしておきます。
上で用意した、追従する要素に対して、「position: absolute」、「pointer-events: none」の2つを指定します。
positionプロパティは、追従させる位置を指定するために与えるもので、pointer-eventsプロパティは、今回のようにボタンをクリックする場合などに、その要素をクリックできるようにするためのものです。
（これがないと、マウスカーソルとボタンの間に、アニメーションする要素が挟まる形になり、ボタンを覆ってしまうので、ボタンがクリックできなくなったり、ボタンに付与したホバーイベントが効かなくなったりしてしまいます。）

追従させるための準備はこれで終わりです。
今回のようにニュッと現れるような効果は、例えば、「transfrom: scale(…)」と、「transition」を用いれば実現することができます。

追従させるための設定

今回の、追従する動きのポイントは「mousemove」というイベントハンドラと、「e.pageX」、「e.pageY」という指定です。
e.pageXはマウスカーソルの水平方向の位置を取得し、e.pageYはマウスカーソルの垂直方向の位置を取得します。
（この２つは、mousemoveとセットでしか使えませんのでご注意ください）
あとは、取得した値を、予め設定しておいたpositionプロパティに、「left」、「top」という位置の指定に用いれば完成です！

まとめ

いかがでしたでしょうか。
初めてこれを知ったとき、マウスカーソルの位置の取得がこんなにかんたんにできるとは、、、と驚きました。。。
追従する要素をオリジナルのものにすれば、より独創的な、おもしろい仕組みになりそうですね！
ボタンの色や形を変えるだけでなく、マウスカーソルにエフェクトをつければ、驚きを与える効果も期待できそうです。
ぜひ、お試しください！