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

編集履歴

質問編集履歴

4

コードを修正しました

2020/06/22 11:31

投稿

RSKK
RSKK

スコア8

title CHANGED
File without changes
body CHANGED
@@ -62,19 +62,19 @@
62
62
  bgImg.onload = function () {
63
63
  context.globalCompositeOperation = 'source-over';
64
64
  context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
65
- drawMask();
66
65
  };
67
66
  bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';
67
+
68
-
68
+ var size = 50;
69
69
  function drawMask() {
70
- var size = 50;
70
+ size += 1;
71
71
  // globalCompositeOperation に destination-in を設定
72
72
  context.save()
73
73
  context.globalCompositeOperation = 'destination-in';
74
74
  context.arc(centerX, centerY, size, 0, Math.PI * 2);
75
75
  context.fill();
76
76
  // マスクを大きくする
77
- size++;
77
+
78
78
  // save(); 時点での描画状態を復元
79
79
  context.restore();
80
80
  window.requestAnimationFrame(drawMask);

3

タイトル削除

2020/06/22 11:31

投稿

RSKK
RSKK

スコア8

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,6 @@
18
18
  <head>
19
19
  <meta charset="UTF-8">
20
20
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
21
- <title>Kyowa</title>
22
21
  <link rel="stylesheet" href="">
23
22
  <link type="text/css" rel="stylesheet"
24
23
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

2

背景画像を挿入しました

2020/06/22 11:06

投稿

RSKK
RSKK

スコア8

title CHANGED
File without changes
body CHANGED
@@ -65,7 +65,7 @@
65
65
  context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
66
66
  drawMask();
67
67
  };
68
- bgImg.src = 'image/background.svg';
68
+ bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';
69
69
 
70
70
  function drawMask() {
71
71
  var size = 50;

1

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

2020/06/22 11:00

投稿

RSKK
RSKK

スコア8

title CHANGED
@@ -1,1 +1,1 @@
1
- create.jsで背景画像を中央からフェードインする方法
1
+ create.jsで背景画像を中央からフェードインしたい
body CHANGED
@@ -1,11 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  [リンク内容](https://supercrowds.co/)
4
- 上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装するため、create.jsで実装しています。
4
+ 上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装したいため、背景画像の上にマスクを設定しておりますが、設定したマスクを動かすことができません。
5
- 円を中央から拡大するところまでは参考サイトを確認しながら実装できたのですが、
6
- 中央からフェードインができません。
5
+ 原因わかりますでしょうか？
7
- どのようにすれば下の写真が出てくるような実装ができるのでしょうか？
8
- 検索キーワードだけでもご教授頂けると幸いです。
9
6
 
10
7
  ### 発生している問題・エラーメッセージ
11
8
 
@@ -21,15 +18,15 @@
21
18
  <head>
22
19
  <meta charset="UTF-8">
23
20
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
24
- <title></title>
21
+ <title>Kyowa</title>
25
22
  <link rel="stylesheet" href="">
26
23
  <link type="text/css" rel="stylesheet"
27
24
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
28
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
25
+
26
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
29
27
  </head>
30
28
  <body>
31
- <canvas id="canvas">
29
+ <canvas id="canvas"></canvas>
32
- </canvas>
33
30
  <style>
34
31
  html, body {
35
32
  width: 100%;
@@ -40,91 +37,51 @@
40
37
  margin: 0;
41
38
  padding: 0;
42
39
  }
40
+
43
41
  canvas {
44
- background-image: url('![imgae](10917b2f51f6a1288d057d46a38cd9de.jpeg)');
45
- background-size: cover;
42
+ background-color: white;
46
- height: 100%;
43
+ height: 100%;
47
- width: 100%;
44
+ width: 100%;
45
+ overflow: hidden;
48
46
  }
49
- </style>
47
+ </style>
50
48
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
51
49
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
52
50
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
53
51
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
54
52
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
55
53
  <script>
54
+ (function () {
55
+ var canvas = document.getElementById('canvas');
56
+ canvas.width = 960;
57
+ canvas.height = 540;
58
+ var centerX = canvas.width / 2;
59
+ var centerY = canvas.height / 2;
60
+ var context = canvas.getContext('2d');
56
61
 
57
- //秒たったら強制的にロード画面を非表示
62
+ var bgImg = new Image();
58
- $(function(){
63
+ bgImg.onload = function () {
59
- setTimeout('stopload()',2000);
64
+ context.globalCompositeOperation = 'source-over';
65
+ context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
66
+ drawMask();
60
- });
67
+ };
61
- function stopload(){
62
- //$('#top').fadeOut(1200);
68
+ bgImg.src = 'image/background.svg';
63
69
 
64
- const WIDTH = window.innerWidth;
65
- const HEIGHT = window.innerHeight;
66
-
67
- // canvas要素を作る。
68
- const canvas = document.getElementById('canvas');
69
- canvas.width = WIDTH;
70
- canvas.height = HEIGHT;
71
-
72
- // コンテキストを取得しておく。
73
- const context = canvas.getContext('2d');
74
-
75
- // body要素に追加する。
76
- document.body.appendChild(canvas);
77
-
78
- //
79
- // メイン処理。
80
- //
81
-
82
- // 表示する円を管理する配列を作成しておく。
83
- // 少ない場合（1個とか2個とか）はいらないかも。
84
- const circles = [];
85
- // 円を追加する。
86
- // ここでは円はx,y,radius（半径）を持ったオブジェクト。
87
- // 単なるオブジェクトのかわりにCircleクラスを作っても良いかも。
88
- circles.push({x:WIDTH/2, y:HEIGHT/2, radius: 50});
89
-
90
- // ループさせる関数。
91
- // 前の描画を消す→オブジェクトの状態を更新する→オブジェクトを描画する→次のフレームに移る
92
- // の繰り返し。
93
- function loop(timestamp) {
70
+ function drawMask() {
94
- // 前の描画を消す。
71
+ var size = 50;
95
- // 背景色が欲しい場合はかわりにfillRectを使い、
96
- // context.fillStyle = 'rgb(255, 0, 0)';
97
- // context.fillRect(0, 0, WIDTH, HEIGHT);
72
+ // globalCompositeOperation に destination-in を設定
98
- // のようにする。
99
- context.clearRect(0, 0, WIDTH, HEIGHT);
100
-
101
- // 各円の状態を更新する。
102
- for(const c of circles) {
103
- if(c.radius < 1000) { c.radius ++; } // どんどん大きくなって…
104
- }
105
-
106
- // 各円を描画する。
107
- for(const c of circles) {
108
- context.beginPath();
73
+ context.save()
109
- context.fillStyle = 'rgb(0, 0, 0)'; // 黒色
74
+ context.globalCompositeOperation = 'destination-in';
110
- context.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
75
+ context.arc(centerX, centerY, size, 0, Math.PI * 2);
111
- context.fill();
76
+ context.fill();
112
- }
113
-
114
- // requestAnimationFrameを呼び出す。
115
- // requestAnimationFrameは1度の呼び出しで1回しか実行してくれないため
116
- // 毎回呼び出す必要がある。
77
+ // マスクを大きくする
78
+ size++;
79
+ // save(); 時点での描画状態を復元
80
+ context.restore();
117
- window.requestAnimationFrame((ts) => loop(ts));
81
+ window.requestAnimationFrame(drawMask);
118
82
  }
119
-
120
- // requestAnimationFrameを1回だけ呼び出す。
121
- // あとはloop関数の中でrequestAnimationFrameが呼び出され
122
- // その中でloop関数が実行され、そのloop関数の中でrequestAnimationFrameが…
123
- // となるので永遠にアニメーションが続く。
124
- window.requestAnimationFrame((ts) => loop(ts));
125
-
126
- };
83
+ })();
127
- </script>
84
+ </script>
128
85
  </body>
129
86
  </html>
130
87
  ```