パララックス（視差）効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。
※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り（セクション）ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m
class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。
ex）ロールオーバー前の画像名：hoge.jpg → ロールオーバー後の画像名：hoge_o.jpg
$(function() {
// ロールオーバー
$("img.imgover").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
}).each(function(){
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
});
});
前回のエントリー「iPhone向けサイトのリセットCSS（暫定版）」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。
基本的な要素は入っているので僕の場合はほとんどこれで十分なのですが、必要な要素・プロパティのみをリセットする方法なので、足りないものは追加が必要です。
commonコメント以下にはfont-familyなどベースとなるbodyの指定と、よく使うのでclearfixを追加してます。ここら辺は自分がよく使うものを指定してコーディングの際の雛形にするとよいと思います。
