【jQuery】VRトラッキングみたいに、カーソルを丸くしクリックアクションを追加する方法

カーソル(cursor)を矢印ではなく丸くし、クリックでポワンっと広がるアニメーションを追加する方法を説明！
この～。。。なんて言うんだろう？
「カーソルが好きな形に変化するや～つ（仮名）」がサイトに実装されてると「こだわってる！」感があるから好きです。

でも、「どうせ難しいんでしょ」って今まで敬遠してたけど、作ってみると意外と簡単でした★
作ったのが嬉しくて、コピペで使いまわしてくれるとさらに嬉しいです。
自分でも、今後このサイトからコピペします。

【コピペする前に簡単に説明を】

jQueryを使って「div」をカーソル(cursor)に合わせて移動させています。
クリックしたら、どんな場所であれアニメーションをするクラスを追加しています。

カーソルがウィンドウから出た場合は消えるようにしています。
この処理をしないと、画面上に黒い点が残っちゃってみっともないんだ。

さらに、「aタグ」エリアに入ったらカーソルを少し変更させて、
クリッカブルな要素だと伝わるようにしています。
「aタグ」エリアに入った時に、もっと変化させた方が分かりやすいけど、
クリックアニメとかぶっちゃうから控えめにしてます。

それではデモですが、こちらのページがそのままデモページとなっています。

下にページ遷移はしませんが「aタグ」のボタンを置いてあるので、
カーソルを載せたりクリックしたりしてみてください！

遷移しないボタン

それではHTMLとCSS、jQueryを。
ご自身のサイトで利用してれたら嬉しいです！

HTML

<div class="cursor fade"></div>

CSS

* {
  cursor: none;
}
.cursor {
  position: fixed;
  z-index: 100;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  background: rgba(10, 18, 60, 0.5);
  display: block;
  border-radius: 20px;
  pointer-events: none;
}
// 「aタグ」に乗った時のアニメ
.active {transform: scale(1.5);opacity: .4;}

// クリックした時のアニメ
.click {animation: .6s click;}
@keyframes click {
  50% {transform: scale(7);opacity: 0;}
  51% {transform: scale(0);opacity: 0;}
  100% {transform: scale(1);opacity: 1;}
}

// カーソルがウィンドウから外れた時のアニメ
.fade {animation: .15s fade forwards;}
@keyframes fade {100% {opacity: 0;}}

jQuery

var cursor=$(".cursor");
  $(window).on("mousemove",function(e){
    var x=e.clientX;
    var y=e.clientY;
    cursor.removeClass("fade");
    // 黒丸をカーソルに合わせて移動
    cursor.css({
      "top": y,
      "left": x
    });
  });

  $(window).on("mouseout",function(e) {
    // カーソルがウィンドウから外れた時の処理
    cursor.addClass("fade");
  });

  $("body").on("click", function() {
    // クリックした時のアニメーション
    cursor.addClass("click");
    setTimeout(function() {
      cursor.removeClass("click");
    },600);
  });

  $("a").on({
    // カーソルが「aタグ」のエリアに入った時の処理
    "mouseenter": function() {
      cursor.addClass("active");
    },"mouseleave": function() {
      cursor.removeClass("active");
    }
  });

  $("a").on("click", function() {
    // 「aタグ」を押したときにアニメーションの間遷移を止める
    event.preventDefault();
    var link = $(this).attr('href');
    setTimeout(function() {
      location.href= link;
    }, 300);
  });