初心者でも簡単！マウスカーソルについてくるやつを作る方法

どうも7noteです。カーソルにくっつける要素を作ります。

こんな感じのものを作ります。

このようにカーソルについてくる要素の作り方について解説していきます。
ゆっくり動かしたり、カーソルを好きな画像に変える方法も紹介していきます。

作り方

index.html

<div id="cursor"></div>  <!-- カーソルについてくる要素 -->

stye.css

#cursor{
  position: fixed;     /* 絶対位置になるように指定 */
  z-index: 2;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
  pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/

/* 以下ついてくる要素の見た目のCSS */
  width: 15px;
  height: 15px;
  background: #CCC;
  border-radius: 50%;
}

script.js

$(function(){

  var cursor=$("#cursor");                // カーソルになる要素を指定
  $(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行
    var x=e.clientX;                      // カーソルの横座標を取得
    var y=e.clientY;                      // カーソルの縦座標を取得

    //  取得した座標をCSSに反映させる
    cursor.css({
      "top":y+"px",
      "left":x+"px"
    });
  });

});

これで実行すれば、マウスカーソルにグレーの●がついてくると思います。

ダミーカーソルの表示位置をずらしたい

style.css

#cursor{
  /* 以下を追記 */
  margin: 0 0 0 -20px; /* 表示位置を左に20pxずらす */
}

表示位置はカーソルの左上起点になっているので、marginやネガティブマージンを使って調整が可能です。

ダミーカーソルをふわっと動かしたい

style.css

#cursor {
  /* 以下を追記 */
  transition: all .2s ease-out;  /* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */
}

カーソルを好きな画像に変える

別の記事でまとめています。

まとめ

どのホームぺージでも一番見られている場所って、カーソルだと思うんですよね（PCだけですが）。
なのでカーソルに注目してUIやUXを変えていくというのは面白いのかもしれません。
広告がくっついてるカーソルとかも見たことがありますが、個人的には見にくくなってしまうのであんまりかもしれませんね。

ただスマートフォンはもちろんカーソルが出ないので、カーソルが変わらないと困るような作りのホームぺージにはしない方がよいでしょう！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ