今回はカーソルの追従アニメーションについて，実際のコードを踏まえながら解説していきます．普通のサイトと比べてカーソルにちょっとしたアニメーションがあると，サイトが映えますよね！映えるサイトは小さな工夫の集まりです．ぜひカーソルのアニメーションを採用してみてください！
今回はモバイル版ではカーソルは映らないので，PC版を前提に作成します．作成するカーソルは，カーソルとは別に小さな円が少し遅れて追従してくるようなアニメーションです．javascriptの関数として作成し，引数の値を変えるだけで追従してくる円の個数と追従速度を変更できるようにします．
HTML
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
</head>
<body>
<div class="cursor"></div>
<div class="follower"></div>
<script src="./js/main.js"></script>
</body>まず初めに「TweenMax」のCDNをHTMLにコピペしてください．
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
今回は「TweenMax」を利用してアニメーションさせます．この「TweenMax」はGreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです．詳しくはこちらのサイトよりご確認ください．
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編
http://un-tech.jp/tweenmax-started/
「class=cursor」の要素がカーソルになる要素です．「class=follower」の中にはspanタグで追従する円を作る要素が入ります．追従する円の個数はjavascriptで指定するので，ここでは何も入っていません．HTMLは以上になります．
CSS
body {
margin: 0;
padding: 0;
cursor: none; //既存のカーソルを消去
}
.cursor,
.follower span {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.cursor {
width: 8px;
height: 8px;
background-color: #000000;
z-index: 1001;
}
.follower span {
width: 20px;
height: 20px;
background-color: #53c43d;
opacity: 0.9;
z-index: 1000;
}まず初めに既存のカーソルを消去します．カーソルはjavascriptでHTMLの要素をカーソルに設定します．「.cursor」と「.follower span」に対して{position:absolute}を指定します．今回はカーソルも追従要素も円形にしていますが，任意の図形の形でも動作します．
.followerのspanタグはHTMLにはありません．このspanタグはjavascriptで製作します．
javascript(jQuery)
/*
カーソルに追従するアニメーション
*/
CursorFollower(5,4); //関数の使用
function CursorFollower(follower_num, delay_time){
let $cursor = $('.cursor'), //カーソルになる要素
$follower = $('.follower'), //カーソルを追従する要素
cWidth = $cursor.width(), //カーソルの横幅
cHeight = $cursor.height(), //カーソルの縦幅
fWidth, //追従要素の横幅
fHeight, //追従要素の縦幅
fHTML = '', //追従要素のHTMLを格納する変数
numFollow = follower_num, //追従要素の個数
mouseX = 0, //マウスの水平位置
mouseY = 0, //マウスの垂直位置
followX = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], //追従要素の水平位置
followY = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], //追従要素の垂直位置
delay = delay_time; //追従時間※値が大きいとゆっくり追従
//追従要素のHTMLを格納する変数に追従要素の個数分だけspanタグを格納
for(let i=0;i<numFollow;i++){
fHTML += '<span class="follower'+i+'"></span>'
}
$follower.html(fHTML); //.followerに追従要素を格納
let $followerSpan = $follower.find('span'); //追従要素
fWidth = $followerSpan.width(); //追従要素の横幅を取得
fHeight = $followerSpan.height(); //追従要素の縦幅を取得
//マウス座標を取得
$(document).on("mousemove", function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
//カーソルの遅延アニメーション
//少しだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
repeat: -1, //リピート設定
onRepeat: function() { //コールバック関数
$followerSpan.each(function(i){ //追従要素の位置を設定
followX[i] += (mouseX - followX[i]) / (delay*(i+1));
followY[i] += (mouseY - followY[i]) / (delay*(i+1));
//追従要素のアニメーション
TweenMax.set($(this), {
css: {
left: followX[i] - (fWidth / 2),
top: followY[i] - (fHeight / 2)
}
});
});
//カーソルのアニメーション
TweenMax.set($cursor, {
css: {
left: mouseX - (cWidth / 2),
top: mouseY - (cWidth / 2)
}
});
}
});
}今回のjavascriptの解説はコード内にコメントアウトで記載しています．javascriptの流れを簡単に説明すると，
- 各種変数，初期値の定義
- 追従要素のHTMLを格納する変数に追従要素の個数分だけspanタグを格納
- マウスの座標を取得
- 追従要素の位置を指定
- 追従要素に対してアニメーション
- カーソルのアニメーション
の流れになります．今回はこれらの処理を関数として定義しているので，之を使用する場合は，
CursorFollower(追従要素の個数, 追従時間)で使用します．追従時間があまりにも長すぎるといつまで経っても追いつかないので，なるべく小さな値にしましょう．追従個数もあまり多いのはお勧めできません．４個から７個程度にしてみてください．
サンプルページのすべてのコードはこちらからダウンロードできます．
Private File - Access Forbiddenこの記事は以下のサイトを参考にしています．
イケてるマウスカーソルを簡単に実装する
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/
