【初心者でもわかる】マウスカーソルを好きな画像に変える方法

どうも7noteです。pcのマウスカーソルを好きな画像に変えましょう。

マウスカーソルといえば↗︎こんな形の矢印が一般的ですが、ちょこっとソースを書くだけでこのカーソルを好きな画像にする事ができます。

マウスカーソルを好きな画像にする方法

index.html

<div id="cursor"><img src="sample.png" alt=""></div>  <!-- imgタグを設定 -->

style.css

body {
  cursor: none;  /*本物のカーソルを非表示に*/
}

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

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"
    });
  });

});

解説

まずはCSSを使ってデフォルトのカーソルを非表示にしてしまいます。

JavaScriptを使い、カーソルの位置を常時取得しつづけます。
その取得している位置に用意した画像を配置することで、まるで画像がカーソルかのように自由に動かすことができるようになります。

まとめ

スマホが普及しているので、カーソルの画像を変えられたとて、需要は少ないかと思います。

しかし、qiitaのようにパソコンからのアクセスが中心になっているサイトもまだまだありますので、使い方次第では面白い使い方ができるかも。

おそまつ！

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