マウスカーソルを変更して、スクロールした時に追従するようにしたい

https://www.evoworx.co.jp/blog/mouse-stoker-gsap/

追従するマウスカーソルを作ろうと思い、現在作成途中のポートフォリオサイトで試してみました。

https://www.hiroyukitakase.work/

確かにマウスを動かしている間は追従していますが、
トラックパッドやキーボードで上下に動かすと、消えてしまい、デフォルトのマウスカーソルが出てしまいます。

これはなぜでしょうか？

記事を出しているEVOWORKさんのマウスカーソルはそのような挙動にはなっていません。

この差が分かる方がいらっしゃいましたら、アドバイスをよろしくお願いします。

行動規範の内容に同意します

回答1件

自己解決

https://codepen.io/yamada-evoworx/pen/YgwwbW
こちらの記事を参考にして、少し違う方法でできました。

body {
  background: #000;
  height: 500vh;
  cursor: none;
}

.circle {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index:4;
}

.follower {
  position: fixed;
  top: 4px;
  left: 0;
  pointer-events: none;
  z-index:3;
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="common/css/style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<title>No name</title>
</head>
<body>
  <div class="circle">
    <svg width="8" height="8">
      <circle cx="4" cy="4" r="4" fill="blue"></circle>
    </svg>
  </div>
  <div class="follower">
    <svg width="40" height="40">
      <circle cx="20" cy="20" r="20" fill="#fdfe00"></circle>
    </svg>
  </div>


</body>
<script>

  var circle = document.querySelector(".circle");
  var follower = document.querySelector(".follower");

  TweenLite.set([circle, follower], {
    xPercent: -50,
    yPercent: -50
  });

  window.addEventListener("mousemove", moveCircle);

  function moveCircle(e) {
  	TweenLite.to(circle, 0.1, {
      x: e.clientX,
      y: e.clientY
    });
    TweenLite.to(follower, 0.6, {
      x: e.clientX,
      y: e.clientY
    });
  }

</script>
</body>
</html>

投稿2021/03/27 04:06

neginattofan

総合スコア66