CSSでアドベントカレンダー作ったよー

この記事は [CSS Advent Calendar 2019](https://qiita.com/advent-calendar/2019/css) 1日目の記事です。
アドベントカレンダーのイベントなので、「アドベントカレンダー × CSS」 の内容で書きます( ✌︎'ω')✌︎

# そもそもアドベントカレンダーってなに
> アドベントカレンダー (Advent calendar) は、クリスマスまでの期間に日数を数えるために使用されるカレンダーである。待降節の期間（イエス・キリストの降誕を待ち望む期間）に窓を毎日ひとつずつ開けていくカレンダーである。すべての窓を開け終わるとクリスマスを迎えたことになる。

[『ウィキペディア日本語版』](https://ja.wikipedia.org/wiki/アドベントカレンダー)（2018年11月23日 (金) 09:37　UTC）

Qiitaのアドベントカレンダーに参戦している人ならご存知の方が多いと思いますが、アドベントカレンダーはクリスマス当日までのカウントダウンを楽しむものとして存在しています。**サンタさーん！こっちですよー！！！**
家庭のアドベントカレンダーは中身にお菓子が入っていることが多いらしいですね。私はやったことないのですが


# CSSで作ってみた
クリスマスが待ち遠しいので`CSS`でカレンダー作ってみました。見た目だけ！！！
画像は使っていません。
日付をクリックすると扉パカパカします。中身にプレゼントが入っています。プレゼントもCSSです。
中身のプレゼントにカーソル当てるとゆらゆら揺れます。

※ Chrome推奨
※ スマホで見ると多少バグが発生するかもしれないですmm
<p class="codepen" data-height="647" data-theme-id="default" data-default-tab="result" data-user="deren2525" data-slug-hash="OJPLwxL" style="height: 647px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Advent Calendar">
  <span>See the Pen <a href="https://codepen.io/deren2525/pen/OJPLwxL">
  CSS Advent Calendar</a> by Deren (<a href="https://codepen.io/deren2525">@deren2525</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# どう作ってるの
あまり綺麗なコードとは言えないのですが、せめてここだけでも...という部分を紹介します（させてください）
## 日付ボックス開けたり閉めたりしてる部分
<img width="366" alt="CSS-Advent-Calendar-2019-12-01-001" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302304/2d97b33b-846c-a64c-6fff-15dfa05227a0.png">


チェックボックス乱用しています。
日付の扉をチェックボックスに紐づいた`<label>`の中に入れることで、扉をクリックすると開いたり閉じたりすることができます。
チェックボックス自体は、あると格好悪いので隠しています。

```index.scss
// クリック処理の部分のみ抜粋
.box { // input
  display: none;
  &:checked {
    + label {
      .door { // 日付の扉
        transform: rotatey(-5deg) rotatex(85deg);
      }
    }
  }
}
```

`HTML` 部分は下記。`Pug` で書いています。いつもお世話になっております。
ここって `Pug` のシンタックスハイライトつかないんですね、少し見辛い...

```pug:index.pug
- for (var i = 1; i <= 25; i++) // 25日分
  .advent-calendar__item
    input.box(type="checkbox" name=`${i}` value=`${i}` id=`${i}`)
    label(for=`${i}`)
      .contents
       // この中でプレゼントごにょごにょ作ってる
      .door: span #{i} // 扉
```
ちなみに `Pug` → `HTML` に変換されると以下のようになります。25日分書くととても長いので1日分だけ

```index.html
<div class="advent-calendar__item">
  <input class="box" type="checkbox" name="1" value="1" id="1">
  <label for="1">
    <div class="contents">
      <!-- この中でプレゼントごにょごにょ作ってる -->
    </div>
    <div class="door"><span>1</span></div>
  </label>
</div>
```

## なんか寂しいから雪を降らせる
<img width="573" alt="CSS-Advent-Calendar-2019-12-01-002" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302304/fa95f32d-b2fc-7108-573d-157306d7bce4.png">

なんか寂しかったのでCSSアニメーションで雪を振らせました。

2の倍数番目、3の倍数番目、4の倍数番目...てかんじで雪がバラバラ落ちてくれるようにしています。
アニメーション時間とかはめちゃくちゃに適当です。

```style.scss

// アニメーション部分のみ抜粋

@mixin snow-animation($duration, $delay) {
  -webkit-animation: #{$duration}s ease-in-out #{$delay}s infinite snowMove;
  animation: #{$duration}s ease-in-out #{$delay}s infinite snowMove;
}

.snow-ball {
  @include snow-animation(6, 0);
  &:nth-of-type(2n) {
    @include snow-animation(5, 2);
  }
  &:nth-of-type(3n) {
    @include snow-animation(5, 1);
  }
  &:nth-of-type(4n) {
    @include snow-animation(5, 3);
  }
  &:nth-of-type(5n) {
    @include snow-animation(5, 5);
  }
  &:nth-of-type(6n) {
    @include snow-animation(5, 4);
  }
  &:nth-of-type(7n) {
    @include snow-animation(6, 2);
  }
  &:nth-of-type(8n) {
    @include snow-animation(6, 3);
  }
  &:nth-of-type(9n) {
    @include snow-animation(6, 1);
  }
}

@keyframes snowMove {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(170px);
  }
}

```

ここも`Pug`さんにだいぶお世話になっている気がする...

```pug:index.pug
- for (var i = 0; i < 35; i++) // 雪の数
 .snow-ball(style=`left: ${12*i}px;`) 
```

# おわり
~~CSSだけで作らないといけない理由は正直ない~~
サンタさーん！プレゼント待ってます！メリークリスマス〜〜