#概要
相生葵の Advent Calendar 2020 7日目の記事です。
初音ミク「マジカルミライ 2020」プログラミング・コンテストに参加したので使用したもののまとめ記事です。
#目次
- 縦スプライト
- 黒幕
- 丸エフェクト
##1. 背景のスプライト
こちらのページを参考にしています。
実際に使用したものが以下です。
<body>
</body>
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」は背景イメージの大きさ指定です。
background-sizeを指定するとデフォルトで背景に敷き詰めが発生するらしいです。
ここでは50pxを指定しているので、画面には「50px × 50px」の正方形が敷き詰められています。
###background-image
「background-image」は背景にイメージを指定するためのパラメータです。
ここでは背景を指定せずに、-webkit-gradient（linear-gradient）という線形グラデーションの指定を使用しています。
ちなみに、「-webkit-gradient」は旧式の書き方で今は「linear-gradient」が一般的らしいです。
通常は「from」で開始色を指定しますが、私が書いたものには「from」にあたるパラメータがありません。
おそらく「color-stop」が「from」の代わりになっているのではないかと思います。
少し動かして見た感じ、開始位置から1つ目の「color-stop」で指定した位置まで指定した色になっているようです。
まとめると以下のようになります。
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）の指定方法
##2. 黒幕
実際に使用したものは以下です。
<body>
<div id="background-effect"></div>
</body>
#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 | 位置の指定 他の要素の位置によって位置が変化しないように絶対値を指定 |
| z-index | -1 | 背景以外に黒幕がかからないようにマイナス値を指定 |
| width | 100% | 背景全体に黒幕をかけたかったので100%を指定 |
| height | 120% | 背景全体に黒幕をかけたかったので120%を指定 |
| top | -20% | 黒幕がかからない部分があったので少し調節 |
##3. 丸エフェクト
実際に使用したものは以下です。
<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>
.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
<div id="background-object-effect" class="display-none">
<!-- エフェクト要素 -->
</div>
.display-none{
display: none;
}
ここでは、「background-object-effect」というid要素をもったdiv要素を定義しています。
曲が始まるまでは、エフェクトを画面に表示させたくなかったので「display: none」で画面に表示させないようになっています。
曲の読み込みが終わったらjs側で、以下のように「display-none」クラスを取り除いています。
$("#background-object-effect").addClass("display-none");
曲が停止されたら表示を消すようにjs側で、「display-none」クラスを再度付与しています。
$("#background-object-effect").addClass("display-none");
###effect-1～3共通要素
<div id="background-object-effect" class="display-none">
<div id="effect-1">
●
</div>
<div id="effect-2">
●
</div>
<div id="effect-3">
●
</div>
</div>
#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 | 位置の指定 他の要素の位置によって位置が変化しないように絶対値を指定 |
| z-index | -1 | 背景以外に●がかからないようにマイナス値を指定 |
###effect-1～3個別要素
<div id="background-object-effect" class="display-none">
<div id="effect-1">
●
</div>
<div id="effect-2">
●
</div>
<div id="effect-3">
●
</div>
</div>
#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% | 位置の指定 左の画面外20%の位置から画面中央の横幅に移動する |
| top | -20% | 50% | 位置の指定 画面の上から20%の位置から画面中央の高さに移動する |
| opacity | 0.7 | 0 | 透明度をだんだん大きく |
####アニメーションの呼び出し
以下の部分でアニメーションの呼び出しを行っています。
#effect-1{
animation: effect1 3s ease-out forwards infinite;
}
以下のように各パラメータが対応しています。
| パラメータ | 設定値 | 意図 |
|---|---|---|
| アニメーション名 | effect1 | |
| アニメーション時間 | 3s | |
| イージング | ease-out | |
| アニメーション終了時の状態を終了後も適用するか | forwards | 適用する |
| 繰り返すか | infinite | 繰り返す |
時間以降は設定しなくてもデフォルト値が適用されます。
デフォルト以外を使用したい場合は、パラメータを設定します。
#まとめ
以上、背景で使用したものまとめでした。