マウスカーソルのデザインを変えたいが期待通りの動きにならない

質問失礼します。

下記サイトを参考にまずはコピペで作業を行ってみましたがサイト通りに動きません。
参考サイト

JQUery、TweenMaxも読み込んでいます。

サイト通りにならない部分は下記になります。
黄色い丸(マウスストーカーが表示されていない)
スクロースした際、点(ストーカーが表示されていないので黒い点のみ)が置いてけぼりでマウスを動かすと一瞬でマウスの場所まで移動する。
aタグにマウスをホバーした時、指マークのマウスカーソルが表示される。

解決方法をご存じの方がいましたらご教授いただけますと幸いです。
よろしくお願いいたします。

コードの追加

HTML

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
    <meta charset="utf-8">
    <meta name=”robots” content=”noindex,nofollow“>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<div class="cursor"></div>
<div class="follower"></div>

<div id="globalMenu"></div>

<div id="box">
	<a href="#">テスト</a>
</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</html>

CSS

@charset "UTF-8";


html,
body {
  width: 100%;
  height: 100%;
  margin: 0
}

body {
  position: relative;
  cursor: none
}

.cursor,
.follower {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; 
  pointer-events: none
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: #000;
  z-index: 1001
}

.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(#fdfe00, 0.5);
  z-index: 1000;
  transition: transform ease 0.1s;
  text-align: center;
    span {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        transform: scale(0)
    }
    &.is-active {
        transform: scale(3)
    }
}


#globalMenu {
    position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    height: 100px;
    background: red;
    z-index: 100
}

#box {
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
    height: 2000px;
    background: green
}

JavaScript

$(function(){

	var cursor = $(".cursor"),
		follower = $(".follower"),
		cWidth = 8, //カーソルの大きさ
		fWidth = 40, //フォロワーの大きさ
		delay = 10, //数字を大きくするとフォロワーがより遅れて来る
		mouseX = 0, //マウスのX座標
		mouseY = 0, //マウスのY座標
		posX = 0, //フォロワーのX座標
		posY = 0; //フォロワーのX座標

	//カーソルの遅延アニメーション
	//ほんの少ーーーしだけ遅延させる 0.001秒
	TweenMax.to({}, .001, {
		repeat: -1,
		onRepeat: function() {
			posX += (mouseX - posX) / delay;
			posY += (mouseY - posY) / delay;

			TweenMax.set(follower, {
				css: {    
				left: posX - (fWidth / 2),
				top: posY - (fWidth / 2)
				}
			});

			TweenMax.set(cursor, {
				css: {    
				left: mouseX - (cWidth / 2),
				top: mouseY - (cWidth / 2)
				}
			});
		}
	});

	//マウス座標を取得
	$(document).on("mousemove", function(e) {
		mouseX = e.pageX;
		mouseY = e.pageY;
	});

	$("a").on({
	"mouseenter": function() {
		cursor.addClass("is-active");
		follower.addClass("is-active");
		},
		"mouseleave": function() {
		cursor.removeClass("is-active");
		follower.removeClass("is-active");
		}
	});

});

Lhankor_Mhy

2020/12/24 07:28

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

ringoame49

2020/12/24 12:37

ご指摘ありがとうございます。質問を編集します。

Lhankor_Mhy

2020/12/25 04:59

「aタグにマウスをホバーした時、指マークのマウスカーソルが表示される。」とのことでしたが、ご提示のコードにはAタグがないようです。実際のコードと異なるのではありませんか？

Lhankor_Mhy

2020/12/25 05:05

ご提示のコードを試してみましたが、以下の通りでした。 1. 黄色い丸(マウスストーカー)は表示された。 2. スクロールした際、点(ストーカーが表示されていないので黒い点のみ)が置いてけぼりでマウスを動かすと一瞬でマウスの場所まで移動する。 3. aタグにマウスをホバーした時、指マークのマウスカーソルは表示されない。ということで、1,3の問題は再現しませんでした。また、ご提示の参考ページを拝見しましたが、こちらで示されているサンプルでも2の問題が起きましたので、同じコードを使っているのであれば同じ問題が起きるのは仕方がないかな、と思いました。

ringoame49

2020/12/25 09:21

度々ありがとうございます。 aタグ忘れていました。コードも修正しました。コードは記載しているものが全てです。しかし結果は同じです。＞ご提示の参考ページを拝見しましたが、こちらで示されているサンプルでも2の問題が起きましたので当方はchrome、edgeで確認しましたがスクロールを行っても同じ位置にカーソルがあり画面から消えることはないです。

Lhankor_Mhy

2020/12/25 09:36

当方はFirefoxでしたので、Chromeで確認してみましたが、やはりご提示の参考ページのサンプルはスクロールに追従しません。もしかして、ringoame49さんは参考ページのサンプルではなくて、参考ページのカーソルの動作をご覧になっているのではありませんか？そちらであれば、当方でもスクロールに追従していますが、ご提示のものとは別のコードを使っていると思います。

Lhankor_Mhy

2020/12/25 10:01

ご質問変更後のコードで、3の問題は確認できましたが、1については確認できていません。問題が確認できていないので推測になりますが、それでよければお答えします。いかがいたしましょうか？

ringoame49

2020/12/25 11:26

>もしかして、ringoame49さんは参考ページのサンプルではなくて、参考ページのカーソルの動作をご覧になっているのではありませんか？その通りでした。是非お願いいたします。

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

回答1件

ベストアンサー

黄色い丸(マウスストーカーが表示されていない)

SCSS をコンパイルしていないのが原因ではないでしょうか？

スクロースした際、点(ストーカーが表示されていないので黒い点のみ)が置いてけぼりでマウスを動かすと一瞬でマウスの場所まで移動する。

以下の変更をお試しください。

scss
1.cursor,
2.follower {
3  border-radius: 50%;
4/*  position: absolute; */
5  position: fixed;

aタグにマウスをホバーした時、指マークのマウスカーソルが表示される。

以下のスタイルを追加してみてください。

css
1a{
2  cursor: none;
3}

投稿2020/12/25 11:48

Lhankor_Mhy

総合スコア36930

ringoame49

2020/12/25 12:21

ありがとうございます。スクロールの置いてけぼりと、aタグはお教えいただいた内容で解決しました。＞SCSS をコンパイルしていないのが原因ではないでしょうか？はい、コンパイルしていなかったです。そもそもそういったものを初めてしりました。そういったものがあるのですね。コンパイル方法を調べてみましたがファイの拡張子をSCSSにするだけではだめなんですね。。。。。とほほほ。。。。何やら環境の準備が必要みたい出すのでちょっとやってみます！

ringoame49

2020/12/25 12:57

できました！スクロールの置いてけぼり解決していませんでした。。。 positionがabsoluteでもfixedでも結果は置いてけぼりでした(>_<) 置いてけぼりについては色々と探ってみます！

ringoame49

2020/12/25 13:11

あ、これコンパイルするアプリを落としたらcssが更新されないせいでabsoluteのままでした。 fixedで解決で万事解決できました！この度は何度もご返信ありがとうございました！！！ SCSS便利そうなので頑張って勉強します！！