HTML5 CSS JavaScript

2021.03.16

【初心者向け】おしゃれなマウスカーソルを簡単に実装する方法【Javascript】

最近は、マウスカーソルの見た目を変えているWebサイトを多く見かけますよね。

特に、「CSS Design Awards」や「Awwwards」などのWebデザインアワードに入賞しているWebサイトでは、デザイン・世界観に合わせてマウスカーソルを変えていることが多いです。

当ブログでレビューしたアワードのWebサイトでも、マウスカーソルの見た目を変えていたWebサイトがありますのでご参考ください。

弊社の制作実績「Venus Belt」でもマウスカーソルを変えており、リンクにホバーさせると変形するアニメーションがついています。アクセスしてぜひ試してみてください。

Venus Belt
スピカデザインの制作実績一覧はこちら

マウスカーソルの見た目を変えることで視覚的にユーザーに情報を伝えることができるため、利用しない手はないですね!

今回はマウスカーソルの見た目を変える方法をご紹介しますが、いきなり高次元なマウスカーソルを作ろうと思ってもハードルが高く感じてしまうと思うので、当記事ではマウスカーソルを変える基本からちょっとおしゃれなマウスカーソルを実装するところまでを解説します。

マウスカーソルの見た目を簡単に変える方法

マウスカーソルの見た目を簡単に変える方法といえば、CSSのcursorプロパティですね。

まずは基本としてcursorプロパティのおさらいをします。

以下Codepen内に代表的なものを書いてみました。各テキストにマウスカーソルを当ててみてください。

See the Pen マウスカーソルをCSSで変更 by spiqa design (@spiqa_design) on CodePen.

cursor: pointer;などはよく使いますね。

指定できる値はたくさんあるので、その他の値は以下サイトをご参照ください。
http://www.htmq.com/style/cursor.shtml

このように決まった形ならCSSで簡単に変更可能ですが、リッチな見た目にしたり、動きをつけるにはCSSだけでは限界があります。

マウスカーソルの見た目をおしゃれにする方法

それでは、おしゃれなWebサイトでよく見かける、ドットのような見た目のマウスカーソルを実装してみましょう。

実装にはJavaScriptを使用し、少し難しい内容もありますが、コードをシンプルにしてわかりやすく解説します!

まずは完成したコードで動きを確認してみてください。

See the Pen マウスカーソルの見た目を変更する by spiqa design (@spiqa_design) on CodePen.

ただマウスカーソルがドットになっているだけでは地味なので、リンクにホバーさせた時は色・形が変化する動きをつけています。

それでは言語ごとに解説していきます!

HTMLの記述

<!--独自のカーソル-->
<div id="cursor" class="cursor"></div>

<!--動き確認用ボタン-->
<a href="#" class="btn">リンク</a>

この方法では、デフォルトのマウスカーソルを非表示にして独自のマウスカーソルをCSSで作成します。

マウスカーソル用のdivタグをHTMLに記述しておきます。場所はどこでもいいですが、わかりやすくbody開始タグ直下などに記述しておきましょう。

Javascriptに渡す用のidと、CSSでスタイル調整する用のclassを、それぞれcursorという名で指定しています。

CSSの記述

/*デフォルトのマウスカーソルを非表示にする*/
html,body,a{
  cursor: none;
}

デフォルトカーソルをページ上で非表示にします。

/*独自のマウスカーソルを作成*/
.cursor {
  position: fixed;
  top: -5px; /*座標調整*/
  left: -5px; /*座標調整*/
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}

オリジナルのカーソルを作成します。

注意点としては、カーソルがページ上で常に一番上に配置されるようにz-indexに高い数値を入れておきます。一番上に配置されることでリンクなど他要素をクリックできなくなるので、pointer-events: none;を指定しておきます。

サイズや色、動きの遅延などはお好みで変更してください。

ドットのサイズを大きくしていくと実際のカーソル位置とオリジナルカーソル(ドット)の中心がズレるので、サイズ変更に合わせてtopleftの数値を調整してカーソル位置とドットの中心を合わせます。

カーソル位置とドットの中心が合っているかわからない場合は、一度ページ全体に指定しているcursor: none;を解除してデフォルトカーソルを表示させて確認しましょう。

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(205, 114, 113, 0.5);
}

ホバーした時のclassを作成し、スタイルを指定します。

今回はドットのサイズと色が変化するようにしています。

こちらも同様、変化するサイズに合わせてtopleftの数値を調整してください。

Javascriptの記述

// カーソル用のdivタグを取得してcursorに格納
var cursor = document.getElementById('cursor'); 

カーソル用に作成したdivタグをidから取得し、cursorに格納します。

// カーソル用のdivタグをマウスに追従させる
document.addEventListener('mousemove', function (e) {
    cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});

マウスが動くたびにマウスの座標を取得し、transformプロパティの数値に指定して、オリジナルカーソルにスタイル指定します。

これによってドットがマウス移動に合わせて追従してきます。

// リンクにホバーした時にクラス追加、離れたらクラス削除
var link = document.querySelectorAll('a');
for (var i = 0; i < link.length; i++) {
    link[i].addEventListener('mouseover', function (e) {
        cursor.classList.add('cursor--hover');
    });
    link[i].addEventListener('mouseout', function (e) {
        cursor.classList.remove('cursor--hover');   
    });
}

aタグにホバーした時の記述です。

aタグにホバーしている時はcursorcursor--hoverクラスを追加し、ホバーしていない時は削除します。

まとめ

以上、初心者向けのマウスカーソルの見た目を変える方法の解説でした!

他のサイトで紹介されているマウスカーソルを変更するコードはハイレベルなものが多いので、わかりやすいように限りなくシンプルにしました。

もっとおしゃれにしたい!という方はこの記事で紹介したコードを応用してチャレンジしてみてください。

もちろん当ブログでも今後、よりリッチなマウスカーソルの実装方法をご紹介していく予定です!

こちらの記事もおすすめ

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!