マウスポインターをCSSでカスタマイズして任意の画像に変化させる方法

先日見た記事にインタラクティブなマウスカーソルというのが載っていて、興味深くサンプルのサイトを見させていただきました。

こちらのWalking Menというサイト、マウスカーソルに赤い点とスポットライト状のエフェクトが追随してきます。おしゃれ。

実装を見てみると、赤い点は画像で、スポットライトはJavaScriptで実装されているようでした。

マウスポインターをCSSで画像に変更する

試しにマウスポインターを画像化するCSSを使ってみました。

下の黒枠の中にマウスポインターが当たると、この画像になります。

#pointer{
cursor: url(画像のパス),auto;
}

cursorプロパティに対して、画像のパス・ポインターの位置・画像が使えなかった場合の表示方法（autoやpointer）を指定することができます。

ページ全体に反映したいときは以下のように指定します。

*{
cursor: url(画像のパス),auto;
}

Retinaディスプレイ対応のために@2xの画像を指定することもできます。

*{
 cursor: -webkit-image-set(url(@1xの画像パス) 1x, url(@2xの画像パス) 2x),auto;
}

参考記事によると、インタラクティブなマウスカーソルが今年は流行りそうとのことなので、まずはCSSだけで出来るこんなところから試してみてはどうでしょう？

書き手：小島芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter： @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします！