マウスストーカー

見本

詳しくはリンク先を参照

説明・補足

ポインタがマウスカーソルに追尾します。aタグにホバーするとポインタがちょっとだけ大きくなります。
下記サンプルです。
https://codepen.io/kk1005/pen/ZEJgLRy
(プレビューが動的に出力されてるからかホバー時の動きが確認できなかったため、取り急ぎこんな見た目になるよ程度です。)

HTML

<div class="mouse-stalker">
  <div></div>
</div>

CSS

.mouse-stalker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
}

/* ポインタの見た目 */
.mouse-stalker > div {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 223, 0, 0.4);
  flex-shrink: 0;
  transition: -webkit-transform ease 0.1s;
  transition: transform ease 0.1s;
  transition: transform ease 0.1s, -webkit-transform ease 0.1s;
}

/* リンクにホバーした時にポインタを大きくする */
.mouse-stalker div.is-active {
  -webkit-transform: scale(2);
          transform: scale(2);
}

js

// マウスストーカー要素
var mouseStalker

// マウスストーカー要素の位置
var stalker = {
  x: 0,
  y: 0
}

// マウスの位置
var mouse = {
  x: 0,
  y: 0
}

// DOMの解析後に初期化をするためのハンドラ
document.addEventListener('DOMContentLoaded', setup)

// マウスの動きを監視
document.addEventListener('mousemove', mousemove)

// 初期化処理
function setup() {
  // マウスストーカー要素を取得
  mouseStalker = document.querySelector('.mouse-stalker')

  // 更新処理を開始
  update()
}

// マウスが動くたびにマウスの位置を保持しておく
function mousemove(e) {
  mouse.x = e.clientX
  mouse.y = e.clientY
}

// 更新処理
function update() {
  // マウスストーカー要素の位置を更新
  stalker.x += (mouse.x - stalker.x) * 0.1
  stalker.y += (mouse.y - stalker.y) * 0.1

  // マウスストーカーの位置を小数点第一位まで四捨五入
  var x = Math.round(stalker.x * 10) / 10
  var y = Math.round(stalker.y * 10) / 10

  // マウスストーカー要素のスタイルを更新
  mouseStalker.style.transform = `translate3d(` + x + 'px,' + y + 'px, 0)'

  // ループ
  requestAnimationFrame(update)
}

//aタグホバー
$("a").hover(
    function() {
      $('.mouse-stalker div').toggleClass("is-active");
    }
);

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です