概要

相生葵の Advent Calendar 2020 7日目の記事です。

初音ミク「マジカルミライ 2020」プログラミング・コンテストに参加したので使用したもののまとめ記事です。

再生はこちらでできます。
コードはこちらにあります。

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

参考

S3 グラデーション（gradient）の指定方法

2. 黒幕

実際に使用したものは以下です。

index.html

<body><divid="background-effect"></div></body>

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	位置の指定他の要素の位置によって位置が変化しないように絶対値を指定
z-index	-1	背景以外に黒幕がかからないようにマイナス値を指定
width	100%	背景全体に黒幕をかけたかったので100%を指定
height	120%	背景全体に黒幕をかけたかったので120%を指定
top	-20%	黒幕がかからない部分があったので少し調節

3. 丸エフェクト

実際に使用したものは以下です。

index.html

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

index.css

.display-none{display:none;}#background-object-effect>div{color:#bce2e8;position:fixed;z-index:-1;}#effect-1{animation:effect13sease-outforwardsinfinite;}#effect-2{animation:effect22sease-outforwardsinfinite;}#effect-3{animation:effect31sease-outforwardsinfinite;}@keyframeseffect1{0%{font-size:300px;left:-20%;top:-20%;opacity:0.7;}100%{opacity:0;left:50%;top:50%;font-size:0px;}}@keyframeseffect2{0%{font-size:200px;left:0%;top:20%;opacity:0.7;}100%{opacity:0;left:50%;top:50%;font-size:0px;}}@keyframeseffect3{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

index.html

<divid="background-object-effect"class="display-none"><!-- エフェクト要素 --></div>

index.css

.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共通要素

index.html

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

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	位置の指定他の要素の位置によって位置が変化しないように絶対値を指定
z-index	-1	背景以外に●がかからないようにマイナス値を指定

effect-1～3個別要素

index.html

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

index.css

#effect-1{animation:effect13sease-outforwardsinfinite;}@keyframeseffect1{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:effect13sease-outforwardsinfinite;}

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

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