はじめに

以下のアプリについて、焼き具合の調整ってどうやってるの？と何人かに聞かれたので書くことにしました。

流れ

まず、画像を全て重なるように、positionで指定して重ねます。
そしてz-indexで画像の優先順位を指定します。
そうすることで、一番上に表示されてる画像をcssのanimationとkeyframeを使って、徐々にopacity: 0;にすると下の画像が浮き上がってきます。
生の状態のさんま(一番上に表示されるようにする)
焼きの状態のさんま(二番目に表示されるようにする)
焦げた状態のさんま(三番目に表示されるようにする)
の3枚を重ねて、時間をずらして順次表示されるようにすることで焼き色の変化を実現しています。

コード

index.html

<div class="sanma">
  <img id="nama" src="./images/nama.png" />
  <img id="yaki" src="./images/yaki.png" />
  <img id="koge" src="./images/koge.png" />
  <p id="text"></p>
</div>

style.css

/* 魚エリア */
.sanma {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
img {
  position: absolute;
  width: 50vw;
}

.namasakana {
  animation: fade-out1 5000ms ease-in;
  animation-fill-mode: forwards;
}
#nama {
  z-index: 3;
}
@keyframes fade-out1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.yakisakana {
  animation: fade-out2 10000ms ease-in;
  animation-fill-mode: forwards;
  opacity: 1;
}

#yaki {
  z-index: 2;
}
@keyframes fade-out2 {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#koge {
  z-index: 1;
}

ポイント

ポイントとしては、上のコードからわかるように、idでz-indexを指定し、classでアニメーションを指定するところです。
最初モーダルが表示されてスタートしますが、animationを設定しているのはcssなので、idでanimation指定をしてしまうとモーダルの後ろで焼き始めてしまいます。
なので、id指定だけして、idにはz-indexのみを設定することでanimationはまだ実装されていないことになります。

classはどうやって作成してるかというと、javascriptで作成するようにしています。
モーダルを消すボタンを押した時に発火するように設定し、モーダルが消えるボタンを押した時にそれぞれのclassを設置するコードを記載しているため、モーダルが消えた時にclassがそれぞれ定義され、animationが始まっている形になります。

おわりに

このアプリはcssとjavascriptがバトンを渡し合って処理をしている感じになり、cssの定義をjavascriptで行っていたりするのでなかなかややこしいのですが、作ってみるとパズルゲームみたいで楽しかったです。
イラストは自分で書くと調整できてやりやすいのでおすすめです。

最後まで読んでいただきありがとうございました。