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

この記事は約4分で読めます。
スポンサーリンク

カーソル(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);
  });
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました