前回はハロウィンバージョンを制作しました。
前回の404の記事
CSSだけでハロウィン気分の404ページ作った
たくさんのいいねありがとうございました。
まさかここまで伸びるとは思わなかったです。とても嬉しかったです。
↑記事で、クリスマスもやろうかなと呟いたので、さっそくクリスマスバージョンを制作しました。
スマホサイズ用に制作していません。PCから観覧お願いします
クリスマス気分の404
ハロウィン404の記事でいただいたコメントを少し参考にさせていただきました。ありがとうございます。
404は、プレゼントの届け先が見つからなくて迷子になっているサンタクロース
@Kilisame 様からいただいたコメント（一部抜粋）
ただ、迷子になっただけのサンタクロースだとクリスマス幸せになれないので、迷子してないサンタを複数用意しました。
子どもたちのためにサンタ達、一生懸命頑張っているんだ...。
今回も画像未使用です。
スマホで見るときは 下の方にサイズ指定ボタンがあるので 0.5x で見ればちょうど良いかと...
See the Pen CSS 404page Christmas by Deren (@deren2525) on CodePen.
アニメーションの部分は前回よりも増えたか減ったか...みたいなかんじですが
今回はクリック要素を追加しました。窓をクリックすると消灯していた部屋が明るくなります。
次で順に説明します。
チェックボックス窓
家の窓をクリックすると窓が明るくなる仕組みはチェックボックスです。
チェックボックスOFFで消灯、ONで点灯します。
チェックボックスと紐づいた<label>の中に窓パーツやその他諸々詰め込んでいます。
チェックボックス自体は見えちゃうと邪魔なので透明度0にして隠しています。
<!-- 家 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>
// 窓のスイッチ
.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部分のみ抜粋します
- ソリに乗ったサンタ
- 煙突サンタ
- 焦ってるサンタ
- クリスマスツリー
ソリに乗ったサンタ
トナカイと共に右へ移動している動きと
トナカイに繋がっているリードを持って腕ブンブン動かしています。
// ソリ乗ったサンタ横移動
@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%は下で煙突に隠れてずっと待機しています。
これ、他にもっといいアイデアありますか...???アニメーション毎に間を起きたい場面結構あるんですよね...
//煙突サンタ
@keyframes santa-chimney {
0% {
top: 60px;
}
10% {
top: 10px;
}
13% {
top: 15px;
}
45% {
top: 15px;
}
48% {
top: 10px;
}
60% {
top: 60px;
}
100% {
top: 60px;
}
}
焦ってるサンタ
下の方でうろうろ歩いているサンタです。
タイミングで向きを反転したり横移動したりしています。
横移動と同時に足と腕も動かしています。
焦っている時に出てくる汗もアニメーションです。
// サンタの横移動
@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;
}
}
クリスマスツリー
窓の中にあるクリスマスツリーです。
デコレーションの光をアニメーションさせています。
// ツリーのデコレーション
@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ページを工夫してある企業さんのホームページを見かけると、少しテンションが上がります。
少しでも楽しんでもらえたらなあという思いで今回は制作しました。
少しでも楽しんでいただけたら、嬉しいです。