teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問マウスカーソルのデザインを変えたいが期待通りの動きにならない

編集履歴

質問編集履歴

3

コードの編集

2020/12/25 09:25

投稿

ringoame49
ringoame49

スコア46

test CHANGED
File without changes
test CHANGED
@@ -220,10 +220,16 @@
220
220
 
221
221
  #box {
222
222
 
223
+ position: absolute;
224
+
225
+ top: 100px;
226
+
227
+ left: 0;
228
+
229
+ width: 100%;
230
+
223
231
  height: 2000px;
224
232
 
225
- margin: 100px 0 0;
226
-
227
233
  background: green
228
234
 
229
235
  }

2

コードの修正

2020/12/25 09:24

投稿

ringoame49
ringoame49

スコア46

test CHANGED
File without changes
test CHANGED
@@ -42,31 +42,35 @@
42
42
 
43
43
  <head>
44
44
 
45
- <meta charset="utf-8">
45
+ <meta charset="utf-8">
46
46
 
47
47
  <meta name=”robots” content=”noindex,nofollow“>
48
48
 
49
- <meta name="viewport" content="width=device-width,initial-scale=1">
49
+ <meta name="viewport" content="width=device-width,initial-scale=1">
50
-
50
+
51
- <link rel="stylesheet" type="text/css" href="style2.css">
51
+ <link rel="stylesheet" type="text/css" href="style2.css">
52
52
 
53
53
  </head>
54
54
 
55
55
  <body>
56
56
 
57
-
57
+
58
58
 
59
59
  <div class="cursor"></div>
60
60
 
61
61
  <div class="follower"></div>
62
62
 
63
-
63
+
64
64
 
65
65
  <div id="globalMenu"></div>
66
66
 
67
+
68
+
67
-
69
+ <div id="box">
68
-
70
+
69
- <div id="box"></div>
71
+ <a href="#">テスト</a>
72
+
73
+ </div>
70
74
 
71
75
 
72
76
 
@@ -170,23 +174,23 @@
170
174
 
171
175
  text-align: center;
172
176
 
173
- span {
177
+ span {
174
-
178
+
175
- display: inline-block;
179
+ display: inline-block;
176
-
180
+
177
- font-size: 14px;
181
+ font-size: 14px;
178
-
182
+
179
- font-weight: bold;
183
+ font-weight: bold;
180
-
184
+
181
- transform: scale(0)
185
+ transform: scale(0)
182
-
186
+
183
- }
187
+ }
184
-
188
+
185
- &.is-active {
189
+ &.is-active {
186
-
190
+
187
- transform: scale(3)
191
+ transform: scale(3)
188
-
192
+
189
- }
193
+ }
190
194
 
191
195
  }
192
196
 
@@ -196,15 +200,19 @@
196
200
 
197
201
  #globalMenu {
198
202
 
199
- position: fixed;
203
+ position: fixed;
204
+
200
-
205
+ top: 0;
206
+
207
+ left: 0;
208
+
201
- width: 100%;
209
+ width: 100%;
202
-
210
+
203
- height: 100px;
211
+ height: 100px;
204
-
212
+
205
- background: red;
213
+ background: red;
206
-
214
+
207
- z-index: 100
215
+ z-index: 100
208
216
 
209
217
  }
210
218
 
@@ -212,9 +220,11 @@
212
220
 
213
221
  #box {
214
222
 
215
- height: 2000px;
223
+ height: 2000px;
224
+
216
-
225
+ margin: 100px 0 0;
226
+
217
- background: green
227
+ background: green
218
228
 
219
229
  }
220
230
 

1

コードの追加

2020/12/25 09:18

投稿

ringoame49
ringoame49

スコア46

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,313 @@
25
25
  解決方法をご存じの方がいましたらご教授いただけますと幸いです。
26
26
 
27
27
  よろしくお願いいたします。
28
+
29
+
30
+
31
+ コードの追加
32
+
33
+
34
+
35
+ HTML
36
+
37
+ ```
38
+
39
+ <!DOCTYPE html>
40
+
41
+ <html dir="ltr" lang="ja">
42
+
43
+ <head>
44
+
45
+ <meta charset="utf-8">
46
+
47
+ <meta name=”robots” content=”noindex,nofollow“>
48
+
49
+ <meta name="viewport" content="width=device-width,initial-scale=1">
50
+
51
+ <link rel="stylesheet" type="text/css" href="style2.css">
52
+
53
+ </head>
54
+
55
+ <body>
56
+
57
+
58
+
59
+ <div class="cursor"></div>
60
+
61
+ <div class="follower"></div>
62
+
63
+
64
+
65
+ <div id="globalMenu"></div>
66
+
67
+
68
+
69
+ <div id="box"></div>
70
+
71
+
72
+
73
+ </body>
74
+
75
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
76
+
77
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
78
+
79
+ <script type="text/javascript" src="script2.js"></script>
80
+
81
+ </html>
82
+
83
+ ```
84
+
85
+
86
+
87
+ CSS
88
+
89
+ ```
90
+
91
+ @charset "UTF-8";
92
+
93
+
94
+
95
+
96
+
97
+ html,
98
+
99
+ body {
100
+
101
+ width: 100%;
102
+
103
+ height: 100%;
104
+
105
+ margin: 0
106
+
107
+ }
108
+
109
+
110
+
111
+ body {
112
+
113
+ position: relative;
114
+
115
+ cursor: none
116
+
117
+ }
118
+
119
+
120
+
121
+ .cursor,
122
+
123
+ .follower {
124
+
125
+ border-radius: 50%;
126
+
127
+ position: absolute;
128
+
129
+ top: 0;
130
+
131
+ left: 0;
132
+
133
+ pointer-events: none
134
+
135
+ }
136
+
137
+
138
+
139
+ .cursor {
140
+
141
+ width: 8px;
142
+
143
+ height: 8px;
144
+
145
+ background-color: #000;
146
+
147
+ z-index: 1001
148
+
149
+ }
150
+
151
+
152
+
153
+ .follower {
154
+
155
+ display: flex;
156
+
157
+ justify-content: center;
158
+
159
+ align-items: center;
160
+
161
+ width: 40px;
162
+
163
+ height: 40px;
164
+
165
+ background-color: rgba(#fdfe00, 0.5);
166
+
167
+ z-index: 1000;
168
+
169
+ transition: transform ease 0.1s;
170
+
171
+ text-align: center;
172
+
173
+ span {
174
+
175
+ display: inline-block;
176
+
177
+ font-size: 14px;
178
+
179
+ font-weight: bold;
180
+
181
+ transform: scale(0)
182
+
183
+ }
184
+
185
+ &.is-active {
186
+
187
+ transform: scale(3)
188
+
189
+ }
190
+
191
+ }
192
+
193
+
194
+
195
+
196
+
197
+ #globalMenu {
198
+
199
+ position: fixed;
200
+
201
+ width: 100%;
202
+
203
+ height: 100px;
204
+
205
+ background: red;
206
+
207
+ z-index: 100
208
+
209
+ }
210
+
211
+
212
+
213
+ #box {
214
+
215
+ height: 2000px;
216
+
217
+ background: green
218
+
219
+ }
220
+
221
+ ```
222
+
223
+
224
+
225
+ JavaScript
226
+
227
+ ```
228
+
229
+ $(function(){
230
+
231
+
232
+
233
+ var cursor = $(".cursor"),
234
+
235
+ follower = $(".follower"),
236
+
237
+ cWidth = 8, //カーソルの大きさ
238
+
239
+ fWidth = 40, //フォロワーの大きさ
240
+
241
+ delay = 10, //数字を大きくするとフォロワーがより遅れて来る
242
+
243
+ mouseX = 0, //マウスのX座標
244
+
245
+ mouseY = 0, //マウスのY座標
246
+
247
+ posX = 0, //フォロワーのX座標
248
+
249
+ posY = 0; //フォロワーのX座標
250
+
251
+
252
+
253
+ //カーソルの遅延アニメーション
254
+
255
+ //ほんの少ーーーしだけ遅延させる 0.001秒
256
+
257
+ TweenMax.to({}, .001, {
258
+
259
+ repeat: -1,
260
+
261
+ onRepeat: function() {
262
+
263
+ posX += (mouseX - posX) / delay;
264
+
265
+ posY += (mouseY - posY) / delay;
266
+
267
+
268
+
269
+ TweenMax.set(follower, {
270
+
271
+ css: {
272
+
273
+ left: posX - (fWidth / 2),
274
+
275
+ top: posY - (fWidth / 2)
276
+
277
+ }
278
+
279
+ });
280
+
281
+
282
+
283
+ TweenMax.set(cursor, {
284
+
285
+ css: {
286
+
287
+ left: mouseX - (cWidth / 2),
288
+
289
+ top: mouseY - (cWidth / 2)
290
+
291
+ }
292
+
293
+ });
294
+
295
+ }
296
+
297
+ });
298
+
299
+
300
+
301
+ //マウス座標を取得
302
+
303
+ $(document).on("mousemove", function(e) {
304
+
305
+ mouseX = e.pageX;
306
+
307
+ mouseY = e.pageY;
308
+
309
+ });
310
+
311
+
312
+
313
+ $("a").on({
314
+
315
+ "mouseenter": function() {
316
+
317
+ cursor.addClass("is-active");
318
+
319
+ follower.addClass("is-active");
320
+
321
+ },
322
+
323
+ "mouseleave": function() {
324
+
325
+ cursor.removeClass("is-active");
326
+
327
+ follower.removeClass("is-active");
328
+
329
+ }
330
+
331
+ });
332
+
333
+
334
+
335
+ });
336
+
337
+ ```