teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問create.jsで背景画像を中央からフェードインしたい

編集履歴

質問編集履歴

4

コードを修正しました

2020/06/22 11:31

投稿

RSKK
RSKK

スコア8

test CHANGED
File without changes
test CHANGED
@@ -126,17 +126,17 @@
126
126
 
127
127
  context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
128
128
 
129
- drawMask();
130
-
131
129
  };
132
130
 
133
131
  bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';
134
132
 
133
+
135
134
 
135
+ var size = 50;
136
136
 
137
137
  function drawMask() {
138
138
 
139
- var size = 50;
139
+ size += 1;
140
140
 
141
141
  // globalCompositeOperation に destination-in を設定
142
142
 
@@ -150,7 +150,7 @@
150
150
 
151
151
  // マスクを大きくする
152
152
 
153
- size++;
153
+
154
154
 
155
155
  // save(); 時点での描画状態を復元
156
156
 

3

タイトル削除

2020/06/22 11:31

投稿

RSKK
RSKK

スコア8

test CHANGED
File without changes
test CHANGED
@@ -37,8 +37,6 @@
37
37
  <meta charset="UTF-8">
38
38
 
39
39
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
-
41
- <title>Kyowa</title>
42
40
 
43
41
  <link rel="stylesheet" href="">
44
42
 

2

背景画像を挿入しました

2020/06/22 11:06

投稿

RSKK
RSKK

スコア8

test CHANGED
File without changes
test CHANGED
@@ -132,7 +132,7 @@
132
132
 
133
133
  };
134
134
 
135
- bgImg.src = 'image/background.svg';
135
+ bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';
136
136
 
137
137
 
138
138
 

1

マスクを使用して大幅に修正致しました

2020/06/22 11:00

投稿

RSKK
RSKK

スコア8

test CHANGED
@@ -1 +1 @@
1
- create.jsで背景画像を中央からフェードインする方法
1
+ create.jsで背景画像を中央からフェードインしたい
test CHANGED
@@ -4,15 +4,9 @@
4
4
 
5
5
  [リンク内容](https://supercrowds.co/)
6
6
 
7
- 上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装するため、create.jsで実装しています。
7
+ 上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装したいため、背景画像の上にマスクを設定しておりますが、設定したマスクを動かすことができません。
8
8
 
9
- 円を中央から拡大するところまでは参考サイトを確認しながら実装できたのですが、
10
-
11
- 中央からフェードインができません。
9
+ 原因わかりますでしょうか？
12
-
13
- どのようにすれば下の写真が出てくるような実装ができるのでしょうか？
14
-
15
- 検索キーワードだけでもご教授頂けると幸いです。
16
10
 
17
11
 
18
12
 
@@ -44,7 +38,7 @@
44
38
 
45
39
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
46
40
 
47
- <title></title>
41
+ <title>Kyowa</title>
48
42
 
49
43
  <link rel="stylesheet" href="">
50
44
 
@@ -52,15 +46,15 @@
52
46
 
53
47
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
54
48
 
55
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
49
+
50
+
51
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
56
52
 
57
53
  </head>
58
54
 
59
55
  <body>
60
56
 
61
- <canvas id="canvas">
57
+ <canvas id="canvas"></canvas>
62
-
63
- </canvas>
64
58
 
65
59
  <style>
66
60
 
@@ -82,19 +76,21 @@
82
76
 
83
77
  }
84
78
 
79
+
80
+
85
81
  canvas {
86
82
 
87
- background-image: url('![imgae](10917b2f51f6a1288d057d46a38cd9de.jpeg)');
83
+ background-color: white;
88
84
 
89
- background-size: cover;
85
+ height: 100%;
90
86
 
91
- height: 100%;
87
+ width: 100%;
92
88
 
93
- width: 100%;
89
+ overflow: hidden;
94
90
 
95
91
  }
96
92
 
97
- </style>
93
+ </style>
98
94
 
99
95
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
100
96
 
@@ -108,149 +104,67 @@
108
104
 
109
105
  <script>
110
106
 
107
+ (function () {
111
108
 
109
+ var canvas = document.getElementById('canvas');
112
110
 
113
- //秒たったら強制的にロード画面を非表示
111
+ canvas.width = 960;
114
112
 
115
- $(function(){
113
+ canvas.height = 540;
116
114
 
117
- setTimeout('stopload()',2000);
115
+ var centerX = canvas.width / 2;
118
116
 
119
- });
117
+ var centerY = canvas.height / 2;
120
118
 
121
- function stopload(){
122
-
123
- //$('#top').fadeOut(1200);
119
+ var context = canvas.getContext('2d');
124
120
 
125
121
 
126
122
 
127
- const WIDTH = window.innerWidth;
123
+ var bgImg = new Image();
128
124
 
129
- const HEIGHT = window.innerHeight;
125
+ bgImg.onload = function () {
126
+
127
+ context.globalCompositeOperation = 'source-over';
128
+
129
+ context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
130
+
131
+ drawMask();
132
+
133
+ };
134
+
135
+ bgImg.src = 'image/background.svg';
130
136
 
131
137
 
132
138
 
133
- // canvas要素を作る。
139
+ function drawMask() {
134
140
 
135
- const canvas = document.getElementById('canvas');
141
+ var size = 50;
136
142
 
137
- canvas.width = WIDTH;
143
+ // globalCompositeOperation に destination-in を設定
138
144
 
139
- canvas.height = HEIGHT;
145
+ context.save()
140
146
 
147
+ context.globalCompositeOperation = 'destination-in';
141
148
 
149
+ context.arc(centerX, centerY, size, 0, Math.PI * 2);
142
150
 
143
- // コンテキストを取得しておく。
151
+ context.fill();
144
152
 
145
- const context = canvas.getContext('2d');
153
+ // マスクを大きくする
146
154
 
155
+ size++;
147
156
 
157
+ // save(); 時点での描画状態を復元
148
158
 
149
- // body要素に追加する。
159
+ context.restore();
150
160
 
151
- document.body.appendChild(canvas);
152
-
153
-
154
-
155
- //
156
-
157
- // メイン処理。
158
-
159
- //
160
-
161
-
162
-
163
- // 表示する円を管理する配列を作成しておく。
164
-
165
- // 少ない場合（1個とか2個とか）はいらないかも。
166
-
167
- const circles = [];
168
-
169
- // 円を追加する。
170
-
171
- // ここでは円はx,y,radius（半径）を持ったオブジェクト。
172
-
173
- // 単なるオブジェクトのかわりにCircleクラスを作っても良いかも。
174
-
175
- circles.push({x:WIDTH/2, y:HEIGHT/2, radius: 50});
176
-
177
-
178
-
179
- // ループさせる関数。
180
-
181
- // 前の描画を消す→オブジェクトの状態を更新する→オブジェクトを描画する→次のフレームに移る
182
-
183
- // の繰り返し。
184
-
185
- function loop(timestamp) {
186
-
187
- // 前の描画を消す。
188
-
189
- // 背景色が欲しい場合はかわりにfillRectを使い、
190
-
191
- // context.fillStyle = 'rgb(255, 0, 0)';
192
-
193
- // context.fillRect(0, 0, WIDTH, HEIGHT);
194
-
195
- // のようにする。
196
-
197
- context.clearRect(0, 0, WIDTH, HEIGHT);
198
-
199
-
200
-
201
- // 各円の状態を更新する。
202
-
203
- for(const c of circles) {
204
-
205
- if(c.radius < 1000) { c.radius ++; } // どんどん大きくなって…
206
-
207
- }
208
-
209
-
210
-
211
- // 各円を描画する。
212
-
213
- for(const c of circles) {
214
-
215
- context.beginPath();
216
-
217
- context.fillStyle = 'rgb(0, 0, 0)'; // 黒色
218
-
219
- context.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
220
-
221
- context.fill();
222
-
223
- }
224
-
225
-
226
-
227
- // requestAnimationFrameを呼び出す。
228
-
229
- // requestAnimationFrameは1度の呼び出しで1回しか実行してくれないため
230
-
231
- // 毎回呼び出す必要がある。
232
-
233
- window.requestAnimationFrame((ts) => loop(ts));
161
+ window.requestAnimationFrame(drawMask);
234
162
 
235
163
  }
236
164
 
165
+ })();
237
166
 
238
-
239
- // requestAnimationFrameを1回だけ呼び出す。
240
-
241
- // あとはloop関数の中でrequestAnimationFrameが呼び出され
242
-
243
- // その中でloop関数が実行され、そのloop関数の中でrequestAnimationFrameが…
244
-
245
- // となるので永遠にアニメーションが続く。
246
-
247
- window.requestAnimationFrame((ts) => loop(ts));
248
-
249
-
250
-
251
- };
252
-
253
- </script>
167
+ </script>
254
168
 
255
169
  </body>
256
170