カーソル用の要素を作ったのはいいけど実装出来ない

前提・実現したいこと

html.scss.javascriptを用いてマウスポインタを動かしたら回りが光るようなプログラム(カーソル用の要素)を作りたいと思っています。詳細は以下のURLをご参考ください。自分もコピペしただけなので、、、

https://codepen.io/yamada-evoworx/pen/YgwwbW

エラーメッセージは発生しませんでした

ソースコード

<ソースコード画面HTML javascript>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="cool.scss"> </head> <body> <div class="btn"><a href="">Button</a></div> <div class="cursor"></div> <div class="follower"></div> <script src="jquery-3.6.0.min.js"></script> <script type="text/javascript" src="TweenMax.min.js"></script> <script> 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"); } }); </script> </body> </html>

<ソースコード画面scss>
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, .5);
z-indes: 1000;
transition: transform ease .1s;
text-align: center;
span {
display: inline-block;
font-size: 14px;
font-weight: bold;
transform: scale(0);
}
&.is-active {
transform: scale(3);
}
}

.btn {
display: inline-block;
width: 160px;
margin: 16px;
text-align: center;
font-size: 16px;
line-height: 1;

a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  background-color: #000;
  cursor: none;
}

}

試したこと

ただコピペして、エラーが出てきたらjqueryを入れたり、TweenMax.min.jsを入れたりしてエラーは取りのぞけましたが実行されませんでした。どこが間違っているのか自分の力ではほんとにわかりません。

補足情報（FW/ツールのバージョンなど）

バージョンなどもわかりませんが自分はファイルを作り、そこで新規作成し、htmlファイルとjavascriptファイルを作りました。そのファイルをVSコードで開きプログラムをしています。

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

回答2件

なんでこれcodepenで動いてるんでしょうね。scssの独自の癖で動いてくれるのでしょうか。

さて、自分も検証してみたのですが、まず気をつけないといけないのは

スクリプトの呼び出し順に注意

スクリプトはbody要素の後ろ、つまりDOM生成後でないと動きません

scssは直接読み込めない

したがって、呼び出すファイルはcssです。htmlから読み込むためには、cssファイルとしてコンパイルされた状態にしないといけません。

CSSの問題点

あと、そのcssの中ですが色々記述に問題があります。一番手こずったのは

rgbaですが、rgbaプロパティの中でカラーコードは使えなかったはずで、rgb変換しないといけません。

なので、#fdfe00の場合はrgba(253,254,0, .5)となるはずです。

それからz-indesなんてプロパティはありません。z-indexですね。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>Document</title>
8<style>
9html,
10body {
11width: 100%;
12height: 100%;
13margin: 0;
14cursor: none;
15}
16
17body {
18position: relative;
19cursor: none;
20}
21
22.cursor,
23.follower {
24border-radius: 50%;
25position: absolute;
26top: 0;
27left: 0; 
28pointer-events: none;
29}
30
31.cursor {
32width: 8px;
33height: 8px;
34background-color: #000;
35z-index: 1001;
36}
37
38.follower {
39display: flex;
40justify-content: center;
41align-items: center;
42width: 40px;
43height: 40px;
44background-color: rgba(253,254,0,.5); /*ここを修正*/
45z-index: 1000;
46transition: transform ease .1s;
47text-align: center;
48span {
49display: inline-block;
50font-size: 14px;
51font-weight: bold;
52transform: scale(0);
53}
54&.is-active {
55transform: scale(3);
56}
57}
58
59.btn {
60display: inline-block;
61width: 160px;
62margin: 16px;
63text-align: center;
64font-size: 16px;
65line-height: 1;
66
67a {
68display: block;
69color: #fff;
70text-decoration: none;
71padding: 16px;
72background-color: #000;
73cursor: none;
74}
75}
76</style>
77<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
78<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
79</head>
80<body>
81<div class="btn"><a href="">Button</a></div>
82<div class="cursor"></div>
83<div class="follower"></div>
84
85<script>
86//DOM生成後でないとカーソルが動きません
87var
88cursor = $(".cursor"),
89follower = $(".follower"),
90cWidth = 8, //カーソルの大きさ
91fWidth = 40, //フォロワーの大きさ
92delay = 10, //数字を大きくするとフォロワーがより遅れて来る
93mouseX = 0, //マウスのX座標
94mouseY = 0, //マウスのY座標
95posX = 0, //フォロワーのX座標
96posY = 0; //フォロワーのX座標
97
98//カーソルの遅延アニメーション
99//ほんの少ーーーしだけ遅延させる 0.001秒
100TweenMax.to({}, .001, {
101repeat: -1,
102onRepeat: function() {
103posX += (mouseX - posX) / delay;
104posY += (mouseY - posY) / delay;
105
106TweenMax.set(follower, {
107css: {    
108left: posX - (fWidth / 2),
109top: posY - (fWidth / 2)
110}
111});
112
113TweenMax.set(cursor, {
114css: {    
115left: mouseX - (cWidth / 2),
116top: mouseY - (cWidth / 2)
117}
118});
119}
120});
121
122//マウス座標を取得
123$(document).on("mousemove", function(e) {
124mouseX = e.pageX;
125mouseY = e.pageY;
126});
127
128$("a").on({
129"mouseenter": function() {
130cursor.addClass("is-active");
131follower.addClass("is-active");
132},
133"mouseleave": function() {
134cursor.removeClass("is-active");
135follower.removeClass("is-active");
136}
137});
138
139</script>
140</body>