ブログ

イケてるマウスカーソルを簡単に実装する

最近、おしゃれなカーソルを実装したサイトをよく見ますよね。
弊社のデザイナーリーダーもカーソルが素敵なWebサイトと記事に取り上げるくらい注目をあびているトレンドでございます。

やってみたいけど、難しそう、、、そうやって食わず嫌いしてるあなたに朗報。
実はコレそんなに難しくないのです。

まず思い浮かべたのは

カーソルを変更するといえば、CSSのcursorでしょう。
リンク付きのテキストにはcursor: pointer;ってのは、normalize.cssとか使えば入れたら勝手に付くぐらいのもの。
知らず知らずのうちに使ってる人も多いかと思います。
カーソルのビジュアルを変更するには、こちらを変えるだけで容易にビジュアルを変更することができます。

.hoge {
  cursor: pointer;
}

参考

cursor – CSS: カスケーディングスタイルシート | MDN

が、しかし、どれもこれもなんとも昭和感漂うというか、、、イケテナイ、、、＼(^o^)／
というわけで本題に入ります。

カーソル用の要素をつくる

ごめんなさい、CSS一行で終われるほどは簡単じゃないです。
イケてるカーソルをつくるには、まずマウスに追従する要素をつくる。
そして、JavaScriptでそれを追従してあげるということになります。

え？それが難しそうだって？まぁまぁ焦らず。

HTML

まずはHTML。
body直下にカーソルになる要素を配置してください。
今回は本サイト同様に遅延してくるものも入れるため、二つほどdiv要素を作ります。
imgタグを入れてカーソルを画像にするのもよいかと思います。

<body>
  <div class="cursor"></div>
  <div class="follower"></div>
</body>

CSS

続いてCSS。
position: absolute;でbodyの一番左上に、カーソルの要素を配置すること。
元々のカーソルを見えなくするようにすること。aタグなんかはnormalize.cssで見えるようになってしまうことがあるので要注意です。
あとはカーソルが常に上に来るようにz-indexで一番上に配置すること。このとき上に配置することで他の要素がクリックできなくなるため、posinter-events: none;でマウスイベントが当たらないようにすることです。

body {
  position: relative;
  cursor: none; //もともとあるカーソルは見えなくなるようにする
}

.cursor,
.follower {
  border-radius: 50%;
  position: absolute; //bodyの一番左上になるように配置する
  top: 0;
  left: 0; 
  cursor: none; //もともとあるカーソルは見えなくなるようにする
  posinter-events: none; //他の要素がクリックできなくならないように
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: #000;
  z-index: 1001; //どの要素よりも一番上になるようにする
}

.follower {
  width: 40px;
  height: 40px;
  background-color: #fdfe00;
  z-indes: 1000; //カーソルの次に上になるようにする
}

JavaScript

そしてJS。
追従がない場合は、これだけで済むかと思います。

追従要素がある場合はこちら。
遅延の追従アニメーションにはGreensockのTweenMaxを使用しています。
またホバーのアニメーションを付ける際にはmouseenter mouseleaveのイベントでclassを付けてCSSで管理するもJSでアニメーションを付けるでもよいと思います。

実装する側からすると敬遠しがちなマウスカーソルもそんなに長くない記述量で実装することができます。
これでオシャレなサイトが作れるのなら試してみる価値もあるのではないでしょうか。
コピペして、自分なりのアレンジをしてみてください！