新千葉 ガーベージ・コレクション

FPGA マガジンやインターフェースで書けなかったこと等をちょぼちょぼ書いてます。@ryos36

本職じゃないけどウェブページ作る

いつのまにか HTML も 5 になって、いまや 5.2 らしい。3.X の時代は自分と同じ ID は世界に2人しかいなかったが、いまや何人いるかわからない。

本職じゃないので深入りしない程度に HTML 5 に対応してみる。

まずはヘッダー。

いつのまにか header とか main とか footer とかが新設されている。スクロールするとヘッダーのロゴが変化する(小さくなる)というビジュアル効果にトライしてみる。

基本は CSS で maxheight を設定すること。2つの css の記述をつくればよい。

#header.small img{
      max-height:50px;
      display:block;
}

#header img{
       max-height:40px;
       display:block;
}

こんな感じであとは header.small と header をタイミングよく入れ替えればよい。それは JavaScript で行う。JQuery も必要。jquery.min.js を読み込んでおくこと。

(function($) {
    $(function() {
        var $header = $('#header');
        $(window).scroll(function() {
            if ($(window).scrollTop() > 100) {
                $header.addClass('small');
            } else {
                $header.removeClass('small');
            }
        });
    });
})(jQuery);

これだけだとアニメーションしない。

#header img,
#header.small img {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

こんな感じでいろんなブラウザに対応しておく(らしいぞ)。これでびーよんと伸びたり縮んだりする Logo ができる。font に対応したいなら、

#header.small .font_logo {
    font-size: 24px;
}

みたいな感じ?