SAMPLE
マウスストーカー(GSAP)
INDEX
説明
マウスを要素動かすとついてくるアニメーションを実装します。
使用するライブラリ
Green Sock GSAP
公式サイト：https://greensock.com/
手順
手順1
ライブラリをダウンロードまたはnpmでインストールし、Green Sock GSAPを読み込みます。
コード
<script src="/[YOUR_DIRECTORY]/gsap.min.js"></script>
コマンド(npm)
npm i gsap
手順2
body直下にカーソルになる要素を記述してください。
遅延するもの、しないものが必要となるため二つdiv要素を作ります。
<body>
<div id="cursor" class="cursor"></div>
<div id="follower" class="follower"></div>
</body>
手順3
CSSを設定します。
デフォルトのマウスカーソルは見えなくなるよう、htmlとbodyにcursor: none;を設定します。
カーソルになる要素はほかの要素よりz-indexが高い位置にないと見えなくなってしまうため、見える位置になるよう値を設定する必要があります。カーソルのサイズや色などは任意で設定してください。
.followerにtransitionを設定することで遅延した動きにすることができます。こちらの値によって遅延速度が変更されます。
html,
body {
cursor: none; // もともとあるカーソルは見えなくなるようにする
}
.cursor,
.follower {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
transform: translate(-50%,-50%);
}
.cursor {
width: 8px;
height: 8px;
background-color: #000;
z-index: 1001; // どの要素よりも一番上になるようにする。.followerより大きい値
}
.follower {
width: 40px;
height: 40px;
background-color: rgba(#fdfe00, .5);
z-index: 1000; // どの要素よりも一番上になるようにする
transition: transform linear .2s;
}
手順4
javascriptを設定します。
実際のマウスカーソルの座標を取得し、それに応じてカーソル要素のpositionを動的に変更することでマウスストーカーを演出します。
マウスを動かす度にレンダリングするためにGSAPのquickSetterメソッドを使用しています。
var
cursor = document.getElementById("cursor"),
follower = document.getElementById("follower"),
link = document.getElementsByClassName("link"),
pos = { x: 0, y: 0 }, // カーソル要素の座標
mouse = { x: pos.x, y: pos.y }, // マウスカーソルの座標
speed = 0.5; // 0.01〜1 数値が大きほど早い
// カーソルの座標を設定する
var cursorSetX = gsap.quickSetter(cursor, "x", "px");
var cursorSetY = gsap.quickSetter(cursor, "y", "px");
// 遅延するカーソルの座標を設定する
var followerSetX = gsap.quickSetter(follower, "x", "px");
var followerSetY = gsap.quickSetter(follower, "y", "px");
// マウスカーソル座標を取得する
document.addEventListener("mousemove", function(event) {
mouse.x = event.pageX;
mouse.y = event.pageY;
});
// レンダリングする
gsap.ticker.add(function() {
var dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio());
pos.x += (mouse.x - pos.x) * dt;
pos.y += (mouse.y - pos.y) * dt;
cursorSetX(pos.x);
cursorSetY(pos.y);
followerSetX(pos.x);
followerSetY(pos.y);
});
}
サンプル
Green Sock GSAPを使ったマウスストーカーのサンプルです。
リンク要素にホバーしたときにアニメーションするようにしているため、こちらも参考にしてみてください。
