404ページで遊んでみました

お勉強がてら、404ページで遊んでみました。
適当にURLを変えて頂くと、404(Not Found)のページが表示されます。
*SVGに非対応のブラウザでは正しく表示されません。(もうそのようなブラウザは殆ど使われていないと思いますが・・・)

 

(;゚Д゚) < なんか動いている!?
と興味を持たれた方へ仕組みをざっくり説明します。

 

404ページの表示は下記の順番で処理を行っています。
1:線を描画

2:一旦フェードアウト

3:ベタ塗りの形でフェードイン

線を描画するのに「SVG」というものを使用しています。
詳しくはG〇〇gle先生へ・・・

方法を知らないと難しいことをしているように見えますが、実際はほぼコピペで実装出来ます。

 

線を描画する為の簡単3ステップ

1:SVG画像を用意(Illustratorで作成)
2:SVGのコードをコピーし、表示したい箇所にペースト
3:CSSで整える

 

 

SVG画像を用意

SVGのコードをコピーして貼り付ける

 

「SVGコード」 をクリックして表示されたコードをコピペ

CSSで整える


@keyframes opacityAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes catAnime {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes catAnime {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes catAnime {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes catAnime {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-ms-keyframes catAnime {
  .page-notfound .svg_cat_content 0% {
    stroke-dashoffset: 3000;
  }
  .page-notfound .svg_cat_content 100% {
    stroke-dashoffset: 0;
  }
}

.page-notfound .notfound_tit {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  color: #9f9f9f;
  -ms-filter: "alpha(opacity=0)";
  opacity: 0;
  font-size: 187.5%;
}

@media only screen and ( min-width: 961px) {
  .page-notfound .notfound_tit {
    font-size: 250%;
  }
}

/* 最後のフェードイン */
.page-notfound .notfound_tit.fade2 {
  animation: opacityAnime 0.5s ease-in 0s forwards;
  -webkit-animation: opacityAnime 0.5s ease-in 0s forwards;
  -moz-animation: opacityAnime 0.5s ease-in 0s forwards;
  -o-animation: opacityAnime 0.5s ease-in 0s forwards;
  -ms-animation: opacityAnime 0.5s ease-in 0s forwards;
}

@media only screen and ( min-width: 961px) {
  .page-notfound .svg_cat {
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }
}

/* SVGの表示設定 <svg〜> にsvg_cat_content というclassを追加して反映 */
/*
stroke: 線の色
fill: 描画色
stroke-dasharray: 線の間隔
stroke-dashoffset: 線の位置
*/
.page-notfound .svg_cat_content {
  stroke: #9f9f9f;
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: catAnime 3s ease-in 0s forwards;
  -webkit-animation: catAnime 3s ease-in 0s forwards;
  -o-animation: catAnime 3s ease-in 0s forwards;
  animation: catAnime 3s ease-in 0s forwards;
}

.page-notfound .svg_cat_content.fade1 {
  stroke: none;
}

.page-notfound .svg_cat_content.fade2 {
  fill: #9f9f9f;
  animation: opacityAnime 0.5s ease-in 0s forwards;
  -webkit-animation: opacityAnime 0.5s ease-in 0s forwards;
  -moz-animation: opacityAnime 0.5s ease-in 0s forwards;
  -o-animation: opacityAnime 0.5s ease-in 0s forwards;
  -ms-animation: opacityAnime 0.5s ease-in 0s forwards;
}

 

おまけ

CSSを反映したところで、線が描画されるところまでが実装出来ます。

フェードアウトやフェードインはjsで処理しています。
*「* *」の記述は適宜で変更
*velocityというjQueryのプラグインを使用しています。


var $el = *SVGに付けたid若しくはclass*,
    $title = *ページタイトルにつけたid若しくはclass*;

    //フェードアウトに掛ける時間
    var duration = 1000;

    // 現在のclassを取得。後から追加するclassを定義。
       var className = $el.attr('class'),
        className1 = className + ' fade1',
        className2 = className1 + ' fade2';
   
    // 最初のsetTimeoutは線の描画に掛かる時間。
    // 線の描画が完了したら$el.velocityの中を実行
    setTimeout(function() {
      $el.velocity({ opacity: 0 },
      { duration: duration, complete:function() {
        $el.attr('class', className1);
        setTimeout(function() {
          $el.attr('class', className2);
          $title.addClass('fade2');
        }, 10);
      } });
    }, 3000);

 

jQueryを触ったことがある方なら「おや?」と思う方もいらっしゃるかもしれません・・・
(○゚д゚) < classの追加なのに何故「addClass」を使わないの?

実は「使わない」 のではなく 「使えない」のです。
svgにclassを追加する場合はattrでclassを書き換えます。
*「svg addclass not working」で検索すると色々出てきます。