イケてるおしゃれなマウスストーカーをつくる（Cool and fashionable Mouse stalker）

マウスストーカーの実装方法は、以下のとおりです。
マウスストーカーをつくるための要素は、html,cssおよびjavascriptなどです。

１．HTML

カーソルおよびマウスストーカー要素について、DIVタグでBODYタグ直下に定義します。
カーソルの形状については、下のとおり変更できますが、マウスストーカーの形状については、大きな円形（40x40 px 変更可）のみとなります。カーソルとマウスストーカーの形状サンプルデモを見る≫

(1) 丸い小さなドットのカーソル（デフォルト 4x4 pxの円形）


<body>
  <div class="cursor"></div>   <!-- カーソル  -->
  <div class="follower"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->

(2) 画像のカーソル


<body>
  <div class="cursor"><img src="cursor.png" title="画像カーソル" width="16"></div>   <!-- 画像のカーソル  -->
  <div class="follower"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->

【参考】サンプル画像；

(3) fontawesomeのWebアイコンのカーソル
fontawesome Webアイコン集(フリー）は、こちらを参照≫


<!-- fontawesome webアイコン -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
  <div class="cursor" style="font-size:20px;color:red"><i class="fab fa-apple"></i></div> <!-- fontawesome webアイコン -->
  <div class="follower"></div>         <!-- マウスストーカー -->

(4) 画像ストーカー


<!-- fontawesome webアイコン -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
  <div class="cursor" style="font-size:20px;color:red"><i class="fab fa-apple"></i></div> <!-- fontawesome webアイコン -->
  <div class="follower"><img src="http://urbanqee.com/img/mousestalker/door-fumi-1.png" width="80"></div>  <!-- 画像マウスストーカー -->

２．CSS

標準カーソルは、非表示にします。
変更カーソルおよびマウスストーカーの大きさは、それぞれ4x4(px)および40x40(px)です（変更可）。
マウスストーカーは、カーソルがAタグにマウスオーバーしたとき、3倍の大きなに拡大されます。


/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;  
}

body, a {
  position: relative;
  cursor: none;   /*標準のカーソルを非表示にする*/
}

.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: gray; /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}

.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}

.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  background-color: #000;
  cursor: none;
}

(注）参照・引用サイト「イケてるマウスカーソルを簡単に実装する」のCSSサンプルコードは誤りがあり、正しく操作しません。
ここではその誤りを訂正して表示しています。サンプルデモ≫

３．JAVASCRIPT

このマウスストーカーのjavascriptは、外部javascriptのjQueryおよびストーカーの追従アニメーションにGreensockのTweenMaxを使用しています。

/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標

//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});

//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
});

４．外部JAVASCRIPTおよびCSS

マウスストーカーを実現するために、２つの外部javascrptのjQueryおよびTweenMaxをCDNサイトからインクルードします。また、fontawesomeのCSSをインクルードします。

jQuery CDNサイト（javascript）：https://code.jquery.com/（必須）
TweenMax CDNサイト（javascript）：https://www.cdnpkg.com/gsap/file/TweenMax.min.js/（必須）
fontawesome CSS CDN：Font Awesomeの使い方：Webアイコンフォントを使おう（FontAwesome使用時）

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 

<!-- fontawesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

５. これまでのまとめ

これまでのHTML、CSSおよびJAVASCRIPTをまとめ、そのHTML全体およびデモを3パターンのマウスストーカーサンプルを作成しました。

小さな丸いドットカーソルと大きな円形-40x40 pxのストーカーサンプル（まとめ１ - 標準カーソル非表示）
画像カーソルと大きな円形-40x40 pxのストーカーサンプル（まとめ２ - 標準カーソル非表示）
Font AwesomeのWebアイコンカーソルと大きな円形-40x40 pxのストーカーサンプル
（まとめ３ - 標準カーソル非表示）
小さな丸いドットカーソルと画像ストーカーサンプル（まとめ４ - 標準カーソル非表示）
標準カーソルと画像ストーカーサンプル（まとめ５ - 標準カーソル表示）
標準カーソルとFont AwesomeのWebアイコンストーカーサンプル（まとめ６ - 標準カーソル表示）

それぞれのカーソルおよびストーカー形状はつぎのとおりです。

項目	まとめ１	まとめ２	まとめ３	まとめ４	まとめ５	まとめ６
カーソル	●			●
ストーカー	●	●	●

まとめ１HTML
まとめ１デモ
まとめ２HTML
まとめ２デモ
まとめ３HTML
まとめ３デモ
まとめ４HTML
まとめ４デモ
まとめ５HTML
まとめ５デモ
まとめ６HTML
まとめ６デモ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカー（Mouse stalker）まとめ１デモ</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 


<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
body, a {
  position: relative;
  cursor: none;    /*標準カーソルを見えなくなるようにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 8px;     /*変更カーソルの大きさ*/
  height: 8px;    /*変更カーソルの大きさ*/
  background-color: red; /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;     /*ストーカーの大きさ*/    
  height: 40px;    /*ストーカーの大きさ*/  
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  background-color: #000;
  cursor: none;
}  

</style>

</head>
<body>
  <div class="cursor"></div>   <!-- カーソル  -->
  <div class="follower"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ１デモ</h1>
<div style="width:100px">
<ul>
 <li><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
<li><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<hr>
(c)urbanqee.com 2021.6,17
</center>

<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカー（Mouse stalker）まとめ２デモ</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 


<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto; 
}
body, a {
  position: relative;
  cursor: none;   /*標準カーソルを見えなくなるようにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 0px;   /*変更カーソルの大きさを0とする*/
  height: 0px;  /*変更カーソルの大きさを0とする*/
  background-color: red;  /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;           /*ストーカーの大きさ*/
  height: 40px;          /*ストーカーの大きさ*/
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  background-color: blue;
  cursor: none;
}  

</style>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

</head>
<body>

<div class="cursor"><img src="https://www.evoworx.co.jp/wp2/wp-content/themes/evoworx2017/common/image/dog_red.png" alt="" width=16></div>
  <div class="follower"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ２デモ<br>画像カーソル</h1>
<div style="width:100px">
<ul>
 <li class="btn"><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li class="btn"><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
 <li class="btn"><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<hr>
(c)urbanqee.com 2021.6,17
</center>
<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカー（Mouse stalker）まとめ３デモ</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 


<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
body, a {
  position: relative;
  cursor: none;      /*標準カーソルを見えなくなるようにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 0px;   /*変更カーソルの大きさを0とする*/
  height: 0px;  /*変更カーソルの大きさを0とする*/
  background-color: gray; /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
color:red;
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;     /*ストーカの大きさ*/
  height: 40px;    /*ストーカの大きさ*/
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  background-color: blue;
  cursor: none;
}  

</style>

<!-- fontawesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

</head>
<body>

<div class="cursor" style="font-size:20px"><i class="fab fa-apple"></i></div>
  <div class="follower"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ３デモ<br> Webアイコンカーソル</h1>
- Webアイコンは、fontawesomeのapple - 

<div style="width:100px">
<ul>
 <li class="btn"><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li class="btn"><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
 <li class="btn"><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<hr>
(c)urbanqee.com 2021.6,17
</center>
<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカーまとめ４デモ - ストーカー画像</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 


<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;  
}
body, a  {
  position: relative;
  cursor: none;     /*標準カーソルを見えなくなるようにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 8px;         /*変更カーソルの大きさ*/
  height: 8px;        /*変更カーソルの大きさ*/
  background-color: red;  /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0px;            /*スターカーの大きさを0にする*/
  height: 0px;           /*ストーカーの大きさを0にする*/
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #000;
  text-decoration: nones;
  padding: 16px;
  background-color: #fff;
  cursor: none;
}  

</style>

</head>
<body>
  <div class="cursor"></div>   <!-- カーソル  -->
  <div class="follower"><img src="http://urbanqee.com/img/mousestalker/lamb-1388937_960_720.png" width="80"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ４デモ<br>ストーカー画像</h1>

<div style="width:100px">
<ul>
 <li class="btn1"><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li class="btn1"><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
 <li class="btn1"><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<br>
<small>画像引用：<a href="https://pixabay.com/ja/" target="_blank">pixabay</a></small>
<hr>
(c)urbanqee.com 2021.6,17
</center>
<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカーまとめ５デモ - 標準カーソル＋ストーカー画像</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 

<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
body, a  {
  position: relative;
  /*cursor: none;     標準のカーソルを使用するのでコメントにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 8px;
  height: 8px;
  background-color: red;  /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0px;            /*ストーカーの大きさを0にする*/
  height: 0px;           /*ストーカーの大きさを0にする*/
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #000;
  text-decoration: nones;
  padding: 16px;
  background-color: #fff;
  cursor: none;
}  

</style>

</head>
<body>
  <div class="cursorx"></div>   <!-- 変更カーソルは使用しないためCLASS名変更する -->
  <div class="follower"><img src="http://urbanqee.com/img/mousestalker/2021 Twitter logo - blue.png" width="20"></div> <!-- マウスストーカー -->
<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ５デモ<br>標準カーソル＋ストーカー画像</h1>

<div style="width:100px">
<ul>
 <li class="btn1"><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li class="btn1"><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
 <li class="btn1"><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<br>
<small>画像引用：<a href="https://about.twitter.com/en/who-we-are/brand-toolkit" target="_blank">Twitter logo</a></small>
<hr>
(c)urbanqee.com 2021.6,17
</center>
<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="utf-8">
<title>イケてるおしゃれなマウスストーカーまとめ６デモ - 標準カーソル＋fontawesome Webアイコン</title>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- TweenMax -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 

<style>
/*  mouse stalker マウスストーカー CSS */	
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
body, a  {
  position: relative;
  /*cursor: none;     標準のカーソルを使用するのでコメントにする*/
}
.cursor,
.follower {
  border-radius: 50%;
  position: absolute; /*bodyの一番左上になるように配置する*/
  top: 0;
  left: 0;
  pointer-events: none; /*他の要素がクリックできなくならないようにする*/
}
.cursor {
  width: 8px;
  height: 8px;
  background-color: red;  /*カーソルの色*/
  z-index: 1001;          /*どの要素よりも一番上になるようにする*/
}
.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0px;            /*ストーカーの大きさを0にする*/
  height: 0px;           /*ストーカーの大きさを0にする*/
  background-color: rgba(253, 254, 0, 0.5);
  z-indes: 1000;        /*カーソル要素よりも一つ下になるようにする*/
  transition: transform ease 0.1s;
  text-align: center;
}
.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}
.follower.is-active {
  transform: scale(3);
}
.btn {
  display: inline-block;
  width: 160px;
  margin: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.btn a {
  display: block;
  color: #000;
  text-decoration: nones;
  padding: 16px;
  background-color: #fff;
  cursor: none;
}  

</style>

<!-- fontawesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

</head>
<body>
  <div class="cursorx"></div>   <!-- 変更カーソルは使用しないためCLASS名変更する -->
  <div class="follower" style="font-size:20px;color:red"><i class="fab fa-apple"></i></div> <!-- マウスストーカー -->

<!-- 以下にコンテンツを記述 -->
<center>
<h1>イケてるおしゃれなマウスストーカーまとめ６デモ<br>標準カーソル＋fontawesome Webアイコン apple</h1>

<div style="width:100px">
<ul>
 <li class="btn1"><a href="https://www.yahoo.co.jp/" target="_blank">yahoo</a><br><br><br>
 <li class="btn1"><a href="https://www.google.com/?hl=ja" target="_blank">google</a><br><br><br>
 <li class="btn1"><a href="https://www.youtube.com/" target="_blank">YouTube</a>
</ul>
</div>
<br>
<small> Webアイコン：<a href="https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free" target="_blank">fontawesome</a></small>
<hr>
(c)urbanqee.com 2021.6,17
</center>
<script>
/* マウスストーカー javascript */
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標
//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});
//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});
$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
}); 
</script>

</body>
</html>

HTML｜CSS｜JAVASCRIPT｜外部JAVASCRIPT｜これまでのまとめ｜TOPへ

画像引用：pixabay