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

編集履歴

質問編集履歴

3

コードの編集

2020/12/25 09:25

投稿

ringoame49
ringoame49

スコア46

title CHANGED
File without changes
body CHANGED
@@ -109,8 +109,11 @@
109
109
  }
110
110
 
111
111
  #box {
112
+ position: absolute;
113
+ top: 100px;
114
+ left: 0;
115
+ width: 100%;
112
116
  height: 2000px;
113
- margin: 100px 0 0;
114
117
  background: green
115
118
  }
116
119
  ```

2

コードの修正

2020/12/25 09:24

投稿

ringoame49
ringoame49

スコア46

title CHANGED
File without changes
body CHANGED
@@ -20,20 +20,22 @@
20
20
  <!DOCTYPE html>
21
21
  <html dir="ltr" lang="ja">
22
22
  <head>
23
- <meta charset="utf-8">
23
+ <meta charset="utf-8">
24
24
  <meta name=”robots” content=”noindex,nofollow“>
25
- <meta name="viewport" content="width=device-width,initial-scale=1">
25
+ <meta name="viewport" content="width=device-width,initial-scale=1">
26
- <link rel="stylesheet" type="text/css" href="style2.css">
26
+ <link rel="stylesheet" type="text/css" href="style2.css">
27
27
  </head>
28
28
  <body>
29
-
29
+
30
30
  <div class="cursor"></div>
31
31
  <div class="follower"></div>
32
-
32
+
33
33
  <div id="globalMenu"></div>
34
-
35
- <div id="box"></div>
36
34
 
35
+ <div id="box">
36
+ <a href="#">テスト</a>
37
+ </div>
38
+
37
39
  </body>
38
40
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
39
41
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
@@ -84,29 +86,32 @@
84
86
  z-index: 1000;
85
87
  transition: transform ease 0.1s;
86
88
  text-align: center;
87
- span {
89
+ span {
88
- display: inline-block;
90
+ display: inline-block;
89
- font-size: 14px;
91
+ font-size: 14px;
90
- font-weight: bold;
92
+ font-weight: bold;
91
- transform: scale(0)
93
+ transform: scale(0)
92
- }
94
+ }
93
- &.is-active {
95
+ &.is-active {
94
- transform: scale(3)
96
+ transform: scale(3)
95
- }
97
+ }
96
98
  }
97
99
 
98
100
 
99
101
  #globalMenu {
100
- position: fixed;
102
+ position: fixed;
103
+ top: 0;
104
+ left: 0;
101
- width: 100%;
105
+ width: 100%;
102
- height: 100px;
106
+ height: 100px;
103
- background: red;
107
+ background: red;
104
- z-index: 100
108
+ z-index: 100
105
109
  }
106
110
 
107
111
  #box {
108
- height: 2000px;
112
+ height: 2000px;
113
+ margin: 100px 0 0;
109
- background: green
114
+ background: green
110
115
  }
111
116
  ```
112
117
 

1

コードの追加

2020/12/25 09:18

投稿

ringoame49
ringoame49

スコア46

title CHANGED
File without changes
body CHANGED
@@ -11,4 +11,159 @@
11
11
  aタグにマウスをホバーした時、指マークのマウスカーソルが表示される。
12
12
 
13
13
  解決方法をご存じの方がいましたらご教授いただけますと幸いです。
14
- よろしくお願いいたします。
14
+ よろしくお願いいたします。
15
+
16
+ コードの追加
17
+
18
+ HTML
19
+ ```
20
+ <!DOCTYPE html>
21
+ <html dir="ltr" lang="ja">
22
+ <head>
23
+ <meta charset="utf-8">
24
+ <meta name=”robots” content=”noindex,nofollow“>
25
+ <meta name="viewport" content="width=device-width,initial-scale=1">
26
+ <link rel="stylesheet" type="text/css" href="style2.css">
27
+ </head>
28
+ <body>
29
+
30
+ <div class="cursor"></div>
31
+ <div class="follower"></div>
32
+
33
+ <div id="globalMenu"></div>
34
+
35
+ <div id="box"></div>
36
+
37
+ </body>
38
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
39
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
40
+ <script type="text/javascript" src="script2.js"></script>
41
+ </html>
42
+ ```
43
+
44
+ CSS
45
+ ```
46
+ @charset "UTF-8";
47
+
48
+
49
+ html,
50
+ body {
51
+ width: 100%;
52
+ height: 100%;
53
+ margin: 0
54
+ }
55
+
56
+ body {
57
+ position: relative;
58
+ cursor: none
59
+ }
60
+
61
+ .cursor,
62
+ .follower {
63
+ border-radius: 50%;
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ pointer-events: none
68
+ }
69
+
70
+ .cursor {
71
+ width: 8px;
72
+ height: 8px;
73
+ background-color: #000;
74
+ z-index: 1001
75
+ }
76
+
77
+ .follower {
78
+ display: flex;
79
+ justify-content: center;
80
+ align-items: center;
81
+ width: 40px;
82
+ height: 40px;
83
+ background-color: rgba(#fdfe00, 0.5);
84
+ z-index: 1000;
85
+ transition: transform ease 0.1s;
86
+ text-align: center;
87
+ span {
88
+ display: inline-block;
89
+ font-size: 14px;
90
+ font-weight: bold;
91
+ transform: scale(0)
92
+ }
93
+ &.is-active {
94
+ transform: scale(3)
95
+ }
96
+ }
97
+
98
+
99
+ #globalMenu {
100
+ position: fixed;
101
+ width: 100%;
102
+ height: 100px;
103
+ background: red;
104
+ z-index: 100
105
+ }
106
+
107
+ #box {
108
+ height: 2000px;
109
+ background: green
110
+ }
111
+ ```
112
+
113
+ JavaScript
114
+ ```
115
+ $(function(){
116
+
117
+ var cursor = $(".cursor"),
118
+ follower = $(".follower"),
119
+ cWidth = 8, //カーソルの大きさ
120
+ fWidth = 40, //フォロワーの大きさ
121
+ delay = 10, //数字を大きくするとフォロワーがより遅れて来る
122
+ mouseX = 0, //マウスのX座標
123
+ mouseY = 0, //マウスのY座標
124
+ posX = 0, //フォロワーのX座標
125
+ posY = 0; //フォロワーのX座標
126
+
127
+ //カーソルの遅延アニメーション
128
+ //ほんの少ーーーしだけ遅延させる 0.001秒
129
+ TweenMax.to({}, .001, {
130
+ repeat: -1,
131
+ onRepeat: function() {
132
+ posX += (mouseX - posX) / delay;
133
+ posY += (mouseY - posY) / delay;
134
+
135
+ TweenMax.set(follower, {
136
+ css: {
137
+ left: posX - (fWidth / 2),
138
+ top: posY - (fWidth / 2)
139
+ }
140
+ });
141
+
142
+ TweenMax.set(cursor, {
143
+ css: {
144
+ left: mouseX - (cWidth / 2),
145
+ top: mouseY - (cWidth / 2)
146
+ }
147
+ });
148
+ }
149
+ });
150
+
151
+ //マウス座標を取得
152
+ $(document).on("mousemove", function(e) {
153
+ mouseX = e.pageX;
154
+ mouseY = e.pageY;
155
+ });
156
+
157
+ $("a").on({
158
+ "mouseenter": function() {
159
+ cursor.addClass("is-active");
160
+ follower.addClass("is-active");
161
+ },
162
+ "mouseleave": function() {
163
+ cursor.removeClass("is-active");
164
+ follower.removeClass("is-active");
165
+ }
166
+ });
167
+
168
+ });
169
+ ```