マウスの動きに合わせて、追随してくるマーカーをjqueryを使用して実装してみたのでメモします。

今回は、小さいスクエアドットに大きいスクエアドットが追随します。また、リンクポイントになると大きいスクエアドットを拡大させるようにしました。

JSを設置する

まずはjavascriptを設置しましょう

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js'></script>

HTMLを記述する

body直下にマウスストーカーを記述します。

<div class="cursor-in"></div>
<div class="cursor-out"></div>

CSSを記述する

CSSを記述します。

.cursor-in,
.cursor-out {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

.cursor-in {
width: 8px;
height: 8px;
background-color: #333;
z-index: 5001;
}
.cursor-in.is-active {
display:none;
}
.cursor-out {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 5000;
transition: transform ease 0.1s;
text-align: center;
}
.cursor-out span {
display: inline-block;
transform: scale(0);
}
.cursor-out.is-active {
transform: scale(4);
}

JSを記述する

javascriptを記述します。function.jsに記述します。

function.js

var
cursorin = $(".cursor-in"),
cursorout = $(".cursor-out"),
cWidth = 8, 
fWidth = 40, 
delay = 10, 
mouseX = 0, 
mouseY = 0, 
posX = 0, 
posY = 0;

TweenMax.to({}, .001, {
repeat: -1,
onRepeat: function () {
posX += (mouseX - posX) / delay;
posY += (mouseY - posY) / delay;

TweenMax.set(cursorout, {
css: {
left: posX - fWidth / 2,
top: posY - fWidth / 2 } });




TweenMax.set(cursorin, {
css: {
left: mouseX - cWidth / 2,
top: mouseY - cWidth / 2 } });


} });


$(document).on("mousemove", function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});

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

変数設定をします。

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(cursorout, {
css: {
left: posX - fWidth / 2,
top: posY - fWidth / 2 } });




TweenMax.set(cursorin, {
css: {
left: mouseX - cWidth / 2,
top: mouseY - cWidth / 2 } });


} });

マウス座標を取得します。

 $(document).on("mousemove", function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});

aタグをhoverした時にクラスを付与します。

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

以上です。

色々hoverカスタマイズしてみたいと思います。

デモはこちら