CSSだけでクリスマス気分の404ページ作った【再来】

前回はハロウィンバージョンを制作しました。

前回の404の記事
[CSSだけでハロウィン気分の404ページ作った](https://qiita.com/deren2525/items/c1cbd3f582542ef5b4f7)
たくさんのいいねありがとうございました。
まさかここまで伸びるとは思わなかったです。とても嬉しかったです。

↑記事で、クリスマスもやろうかなと呟いたので、さっそくクリスマスバージョンを制作しました。
**スマホサイズ用に制作していません。PCから観覧お願いします**

## クリスマス気分の404
ハロウィン404の記事でいただいたコメントを少し参考にさせていただきました。ありがとうございます。


> 404は、プレゼントの届け先が見つからなくて迷子になっているサンタクロース

@Kilisame 様からいただいたコメント（一部抜粋）

ただ、迷子になっただけのサンタクロースだとクリスマス幸せになれないので、迷子してないサンタを複数用意しました。
子どもたちのためにサンタ達、一生懸命頑張っているんだ...。

今回も画像未使用です。
スマホで見るときは 下の方にサイズ指定ボタンがあるので 0.5x で見ればちょうど良いかと...

<p data-height="732" data-theme-id="0" data-slug-hash="NerPbj" data-default-tab="result" data-user="deren2525" data-pen-title="CSS 404page Christmas" class="codepen">See the Pen <a href="https://codepen.io/deren2525/pen/NerPbj/">CSS 404page Christmas</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

アニメーションの部分は前回よりも増えたか減ったか...みたいなかんじですが
今回はクリック要素を追加しました。窓をクリックすると消灯していた部屋が明るくなります。
次で順に説明します。

## チェックボックス窓

家の窓をクリックすると窓が明るくなる仕組みはチェックボックスです。
チェックボックスOFFで消灯、ONで点灯します。
チェックボックスと紐づいた`<label>`の中に窓パーツやその他諸々詰め込んでいます。
チェックボックス自体は見えちゃうと邪魔なので透明度0にして隠しています。

```main.html
<!-- 家 HTMLを一部抜粋 -->
<input class="input-toggle" id="toggle" type="checkbox" />
<label class="house-toggle" for="toggle">
   <span class="house__window"> <!-- 窓 -->
      <!-- 窓の中のモジュール達 -->
      <span class="cat">
         <span class="cat__face">
         <span class="cat__body">
      </span>
      <span class="present">
         <span class="present__ribbon">
      </span>
   </span>
</label>
```

```style.scss
// 窓のスイッチ
.input-toggle { // チェックボックス
  opacity: 0;
  &:checked {
    + .house-toggle { // labelのクラス名
      .house__window { // 窓
        background-color: $HOUSE_WINDOW_ON_COLOR;
        transition: 0.5s;
        .tree,
        .cat,
        .present {
          opacity: 1;
          transition: 0.5s;
        }
      }
    }
  }
}
```

## CSSアニメーションを使用したところ
`@keyflame`部分のみ抜粋します
- [ソリに乗ったサンタ](#ソリに乗ったサンタ)
- [煙突サンタ](#煙突サンタ)
- [焦ってるサンタ](#焦ってるサンタ)
- [クリスマスツリー](#クリスマスツリー)

### ソリに乗ったサンタ

トナカイと共に右へ移動している動きと
トナカイに繋がっているリードを持って腕ブンブン動かしています。

```style.scss

// ソリ乗ったサンタ横移動
@keyframes sori-santa {
  0% {
    top: -10px;
    left: -500%;
  }
  100% {
    top: -20px;
    left: 500%;
  }
}

// サンタの左腕
@keyframes sori-santa-hand-left {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

// サンタの左腕にあるリード紐
@keyframes sori-santa-lead-left {
  0% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

// サンタの右腕
@keyframes sori-santa-hand-right {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}

// サンタの右腕にあるリード紐
@keyframes sori-santa-lead-right {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

```

### 煙突サンタ
煙突からひょっこりしてるサンタです。
全体を上下に動かしています。
上下するたびに少し間を起きたかったので`60%`で上下移動は終わり、残りの`40%`は下で煙突に隠れてずっと待機しています。
これ、他にもっといいアイデアありますか...???アニメーション毎に間を起きたい場面結構あるんですよね...

```style.scss
//煙突サンタ
@keyframes santa-chimney {
  0% {
    top: 60px;
  }
  10% {
    top: 10px;
  }
  13% {
    top: 15px;
  }
  45% {
    top: 15px;
  }
  48% {
    top: 10px;
  }
  60% {
    top: 60px;
  }
  100% {
    top: 60px;
  }
}
```

### 焦ってるサンタ
下の方でうろうろ歩いているサンタです。
タイミングで向きを反転したり横移動したりしています。
横移動と同時に足と腕も動かしています。
焦っている時に出てくる汗もアニメーションです。

```style.scss

// サンタの横移動
@keyframes santa-walk {
  0% {
    left: 100%;
    transform: rotateY(0);
  }
  35% {
    left: 30%;
    transform: rotateY(0);
  }
  36% {
    transform: rotateY(180deg);
  }
  50% {
    left: 57%;
    transform: rotateY(180deg);
  }
  51% {
    transform: rotateY(0);
  }

  80% {
    left: calc(0% - 125px);
  }
  100% {
    transform: rotateY(0);
    left: calc(0% - 125px);
  }
}

// サンタの右足
@keyframes santa-foot-right {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(10deg);
  }
}


// サンタの左足
@keyframes santa-foot-left {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

// サンタの左腕
@keyframes santa-hand-left {
  0% {
    transform: rotate(14deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

// 汗（1つだけ抜粋）
@keyframes sweat {
  0% {
    opacity: 0;
    top: 18px;
    right: 30px;
    transform: rotate(-30deg);
  }
  40% {
    opacity: 1;
    top: 10px;
    right: 20px;
  }
  60% {
    opacity: 0;
    top: 10px;
    right: 20px;
  }
  100% {
    opacity: 0;
  }
}

```

### クリスマスツリー
窓の中にあるクリスマスツリーです。
デコレーションの光をアニメーションさせています。


```style.scss
// ツリーのデコレーション
@keyframes decoration {
  0% {
    opacity: 0.5;
    transform: translate3d(-2px, -3px, 0) scale(1);
  }
  40% {
    opacity: 0.6;
    transform: translate3d(-2px, -3px, 0) scale(1.5);
  }
  66% {
    opacity: 0.4;
    transform: translate3d(-2px, -3px, 0) scale(1.4);
  }
  100% {
    opacity: 0.5;
    transform: translate3d(-2px, -3px, 0) scale(1);
  }
}
```

## 感想


アニメーションとかの見た目、少しごちゃごちゃしちゃいましたかね...でも満足しました。
窓の点灯消灯気に入っています。
コードの中身が少し冗長気味になってしまったので、リファクタリングしていきたいです。

普段ググってて、404ページって出会ってしまったら悲しくなりがちですよね。
404ページを工夫してある企業さんのホームページを見かけると、少しテンションが上がります。
少しでも楽しんでもらえたらなあという思いで今回は制作しました。
少しでも楽しんでいただけたら、嬉しいです。