LAB 2021.12.08

マウスストーカー(GSAP)

#JavaScript

Written by yamada

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);
});

}