マジミラ2020プロコンで使用したものまとめ１（背景）

#概要
[相生葵の Advent Calendar 2020](https://adventar.org/calendars/5480) 7日目の記事です。

[初音ミク「マジカルミライ 2020」プログラミング・コンテスト](https://magicalmirai.com/2020/procon/)に参加したので使用したもののまとめ記事です。

再生は[こちら](https://aoaoaoaoaoaoaoi.github.io/magicalmirai-procon-2020-3/)でできます。
コードは[こちら](https://github.com/aoaoaoaoaoaoaoi/magicalmirai-procon-2020-3)にあります。

#目次
1. 縦スプライト
2. 黒幕
3. 丸エフェクト

##1. 背景のスプライト
[こちら](http://blog.re-sta.com/?p=292)のページを参考にしています。
実際に使用したものが以下です。

```html:index.html 

<body>

</body>
```

```css:index.css 

body{
    background-color: #ff007f;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #ffffff), color-stop(.5, transparent), to(transparent));
    -webkit-background-size: 50px;
}
```

###background-color
「background-color」は背景色の指定です。
ここでは、派手なピンク色（#ff007f）を指定しています。

###background-size
「[-webkit-background-size](https://developer.mozilla.org/ja/docs/Web/CSS/background-size)」は背景イメージの大きさ指定です。
background-sizeを指定するとデフォルトで背景に[敷き詰め](https://developer.mozilla.org/ja/docs/Web/CSS/Scaling_background_images)が発生するらしいです。
ここでは50pxを指定しているので、画面には「50px × 50px」の正方形が敷き詰められています。

###background-image
「[background-image](https://developer.mozilla.org/ja/docs/Web/CSS/background-image)」は背景にイメージを指定するためのパラメータです。

ここでは背景を指定せずに、-webkit-gradient（linear-gradient）という線形グラデーションの指定を使用しています。


ちなみに、「-webkit-gradient」は旧式の書き方で今は「linear-gradient」が一般的らしいです。

通常は「from」で開始色を指定しますが、私が書いたものには「from」にあたるパラメータがありません。
おそらく「color-stop」が「from」の代わりになっているのではないかと思います。
少し動かして見た感じ、開始位置から1つ目の「color-stop」で指定した位置まで指定した色になっているようです。

まとめると以下のようになります。

```css

background-image: -webkit-gradient(linear
, 0 0                         /*開始地点の指定 0, 0 なので 背景イメージ領域の左下？*/ 
, 100% 0                      /*終了地点の指定 100%, 0 なので 背景イメージ領域の右下？*/
, color-stop(.5, #ffffff)     /*開始地点から50%の位置までを白色にする*/
, color-stop(.5, transparent) /*開始地点から50%の位置以降をピンク色にする*/
, to(transparent));           /*ピンク色が最後で終わるグラデーション*/
```

###参考
[S3 グラデーション（gradient）の指定方法](http://www.css-lecture.com/log/css3/css3-gradient.html)

##2. 黒幕
実際に使用したものは以下です。

```html:index.html 
<body>
  <div id="background-effect"></div>
</body>
```

```css:index.css 

#background-effect{
    background-color: #000000;
    opacity: 0.5;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 120%;
    top: -20%;
}
```

単純に背景全体に黒色をかぶせています。

各パラメータは以下のように設定しています。

|  パラメータ  |  設定値  |  意図  |
| ---- | ---- | ---- |
|  background-color  |  #000000（黒） | 色の指定  |
|  opacity  | 0.5 |  透過度  |
|  position  |  fixed  | 位置の指定<br>他の要素の位置によって位置が変化しないように絶対値を指定 |
|  z-index  | -1 |  背景以外に黒幕がかからないようにマイナス値を指定  |
|  width  | 100% |  背景全体に黒幕をかけたかったので100%を指定  |
|  height  | 120% |  背景全体に黒幕をかけたかったので120%を指定  |
|  top　| -20% |  黒幕がかからない部分があったので少し調節  |

##3. 丸エフェクト
実際に使用したものは以下です。

```html:index.html 
<body>
  <div id="background-object-effect" class="display-none">
    <div id="effect-1">
      ●
    </div>
    <div id="effect-2">
      ●
    </div>
    <div id="effect-3">
      ●
    </div>
  </div>
</body>
```

```css:index.css 

.display-none{
    display: none;
}

#background-object-effect > div{
    color:#bce2e8;
    position: fixed;
    z-index: -1;
}

#effect-1{
    animation: effect1 3s ease-out forwards infinite;
}

#effect-2{
    animation: effect2 2s ease-out forwards infinite;
}

#effect-3{
    animation: effect3 1s ease-out forwards infinite;
}

@keyframes effect1 {
    0% {
        font-size: 300px;
        left: -20%;
        top: -20%;
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        left: 50%;
        top:50%;
        font-size: 0px;
    }
}

@keyframes effect2 {
    0% {
        font-size: 200px;
        left: 0%;
        top: 20%;
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        left: 50%;
        top:50%;
        font-size: 0px;
    }
}

@keyframes effect3 {
    0% {
        font-size: 100px;
        left: 80%;
        top: 10%;
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        left: 50%;
        top:50%;
        font-size: 0px;
    }
}
```
html内に記述した「●」を動かしています。
htmlの上から見ていきます。

###background-object-effect
```html:index.html

<div id="background-object-effect" class="display-none">
  <!-- エフェクト要素 -->
</div>
```
```css:index.css 

.display-none{
    display: none;
}
```
ここでは、「background-object-effect」というid要素をもったdiv要素を定義しています。

曲が始まるまでは、エフェクトを画面に表示させたくなかったので「display: none」で画面に表示させないようになっています。

曲の読み込みが終わったらjs側で、以下のように「display-none」クラスを取り除いています。

```js:js

$("#background-object-effect").addClass("display-none");
```

曲が停止されたら表示を消すようにjs側で、「display-none」クラスを再度付与しています。

```js:js

$("#background-object-effect").addClass("display-none");
```
###effect-1～3共通要素

```html:index.html

<div id="background-object-effect" class="display-none">
  <div id="effect-1">
    ●
  </div>
  <div id="effect-2">
    ●
  </div>
  <div id="effect-3">
    ●
  </div>
</div>
```
```css:index.css

#background-object-effect > div{
    color:#bce2e8;
    position: fixed;
    z-index: -1;
}
```

cssの「#background-object-effect > div」は「#background-object-effect」直下の「div要素」という意味です。

「background-object-effect」以下に「effect-1, effect-2, effect-3」のdiv要素があるので、このcss要素が「effect-1, effect-2, effect-3」の全てのdiv要素に適用されています。

各パラメータについては以下です。

|  パラメータ  |  設定値  |  意図  |
| ---- | ---- | ---- |
|  color  |  #bce2e8 | 文字色（●）の指定  |
|  position  |  fixed  | 位置の指定<br>他の要素の位置によって位置が変化しないように絶対値を指定 |
|  z-index  | -1 |  背景以外に●がかからないようにマイナス値を指定  |

###effect-1～3個別要素
```html:index.html

<div id="background-object-effect" class="display-none">
  <div id="effect-1">
    ●
  </div>
  <div id="effect-2">
    ●
  </div>
  <div id="effect-3">
    ●
  </div>
</div>
```

```css:index.css 

#effect-1{
    animation: effect1 3s ease-out forwards infinite;
}

@keyframes effect1 {
    0% {
        font-size: 300px;
        left: -20%;
        top: -20%;
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        left: 50%;
        top:50%;
        font-size: 0px;
    }
}
```

effect-1, 2, 3はパラメータの値を変えているだけなので、effect-1だけ見ていきます。
ここでは、cssアニメーションを使用して、動きの設定をしています。

####アニメーションの設定
「@ keyframes」の部分がアニメーションの設定です。

「effect1」はアニメーションの名前です、呼び出し時にこの名前を指定します。

「0%」が開始時点、「100%」が終了時点の要素の状態です。
間の「1%～100%」については指定しなくてもいい感じに調整してくれます。（指定することも可能です）

各パラメータについては以下のように設定しました。

|  パラメータ  |  0%  |  100%  |  意図  |
| ---- | ---- | ---- | ---- |
|  font-size  |  300px |  0px | 文字をだんだん小さく  |
|  left  |  -20%  |  50%  | 位置の指定<br>左の画面外20%の位置から画面中央の横幅に移動する |
|  top  | -20% | 50% |  位置の指定<br>画面の上から20%の位置から画面中央の高さに移動する  |
|  opacity  | 0.7 | 0 |  透明度をだんだん大きく  |

####アニメーションの呼び出し
以下の部分でアニメーションの呼び出しを行っています。

```css

#effect-1{
    animation: effect1 3s ease-out forwards infinite;
}
```

以下のように各パラメータが対応しています。

|  パラメータ  |  設定値  |  意図  |
| ---- | ---- | ---- |
|  アニメーション名  |  effect1 |   |
|  アニメーション時間  |  3s  |  |
|  イージング  | ease-out |    |
|  アニメーション終了時の状態を終了後も適用するか  | forwards |  適用する  |
|  繰り返すか  | infinite |  繰り返す  |

時間以降は設定しなくてもデフォルト値が適用されます。
デフォルト以外を使用したい場合は、パラメータを設定します。

#まとめ
以上、背景で使用したものまとめでした。