最近はやりのちょっとオシャレなNotFoundページを作ってみた #CSS

世間的には休日なのに仕事をしていると、脳の創造的活動を司る領域が破壊されていくような気がしてしまいます。

ある日見たWWFの404ページに感銘を受けて、いつか面白い404ページを作ってみたいと思っていました。
いい機会なのと、息抜きを兼ねて404 Not Foundページをちょっとファニーな感じに作ってみました。

※注意：この投稿は技術的にためになるようなことは殆ど書いていません。

どんなNot Foundページを作ったの？

背景画像がランダムで選択されます。
背景画像に沿ったテキストが表示されます。
「404 Not Found」のテキストがランダムでアニメーションします。

サンプルページ

ロード時間とか一切考慮していない
ブラウザ互換も全く気にしていないchromで試しただけ。

素材やライブラリについて

このNot Foundページを作るにあたって以下の素材・ライブラリを利用しています。

ねこの壁紙
http://dora-neco.com/background.html
ねこです、ファニーです。
ここの画像は個人利用のみOKです。
フォント
http://azukifont.com/index.html
フリーフォントです、ファンシーです。
商用などで利用する場合は製作者に連絡が必要です。
Magic(css ライブラリ)
http://www.minimamente.com/magic-css3-animations/
cssだけでアニメーションを実現します、ファンキーです。

ソースコード

404.html

<html lang="ja">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/404.css">
    <link rel="stylesheet" href="css/magic.min.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <title>404 Not Found</title>
</head>

<body>
    <div id="notfound">４０４ のっとふぁうんど。</div>
    <div class="fany-text" data-match-img="404-01.jpg">なんてことだ！ここにはあなたの望むページなんて存在しやしないんだ！！</div>
    <div class="fany-text" data-match-img="404-02.jpg">もう、ここは君の知っているあのページではないんだよ…</div>
    <div class="fany-text" data-match-img="404-03.jpg">ここにはページないから帰ってくれないかな？</div>
</body>

<script src="js/404.js"></script>

</html>

404.js

;$(function() {
    // 背景画像リスト
    var img_list = [
        "404-01.jpg",
        "404-02.jpg",
        "404-03.jpg"
    ];

    // 404テキストのアニメーションリスト
    var anim_list = [
        "puffin",
        "twisterInUp",
        "swashIn",
        "tinUpIn"
    ];

    // 背景に表示する画像のインデックスを設定
    var img_list_index  = Math.floor(Math.random() * img_list.length);

    // 404テキストに設定するアニメーションのインデックスを設定
    var anim_list_index = Math.floor(Math.random() * anim_list.length);

    // 背景画像のcssを設定
    $("body")
        .css("background","url(./img/"+img_list[img_list_index]+") no-repeat center")
        .css("background-size","cover");

    // 404テキストのアニメーションクラスを設定
    $("#notfound").addClass("magictime "+anim_list[anim_list_index]);

    // 背景画像用のテキストを画面に表示
    $("div.fany-text").each(function() {
        var $this = $(this);
        if ($this.data("match-img") === img_list[img_list_index]) {
            setTimeout(function() { $this.fadeIn("slow"); }, 1500);
        }
    });
});

404.css

@font-face {
  font-family: "uzura";
  src: url(../fonts/uzura.eot);
}
@font-face {
  font-family: "uzura";
  src: url(../fonts/uzura.ttf) format("truetype");
}
html,body {
    width:100%;
}
body {
    font-family: "uzura";
    text-align:center;
    vartical-align:middle;
}
#notfound {
    margin:20% 12%;
    padding:3% 0;
    font-size:4em;
    font-weight:bolder;
    background-color:rgba(255,255,255,0.7);
    border-radius:24px;
}
.fany-text {
    display:none;
    margin:0 24%;
    padding:1% 0;
    background-color:rgb(241,234,179);
}

まとめ

これで、脳の創造的活動司る領域は保護された。