本職じゃないけどウェブページ作る
いつのまにか 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; }
みたいな感じ?