CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアル

JAM - HTML5 and Flash

Session5「CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアルしてください。」

との事で、HTML5でマークアップ。

forked from: CBC NET - jsdo.it - Share JavaScript, HTML5 and CSS

始めは22面体とか突拍子のない事考えてたんだけど、結果的にはこんな感じに。

記事写真にマウスオーバーすると内容レイヤーが表示される仕組みで、その表示にCSS3のtransitionを使用してみた。

その対比というか、記事スライドは横方向にしている。

横スライドはjsでabsolute座標を変更してるんだけど、Operaがどうもカクカクでjsが速いんだか何だか。

カテゴリ、タグ、月別アーカイブのリンクには、Ajaxでもブラウザの「戻る」「進む」を有効にさせるべく、jQuery hashchange eventを使用。

(参考)
・Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン

ロゴ画像が四角い事もあり、全体的に四角なデザインを心掛けてみた。