パララックス風スライダーにトップページを変更してみたぞ！

01 . 変更箇所

・最新記事10件の表示をリスト型からパララックス風のスライダーに変更
・フッターにサイドバーの要素を移動
・トップページ以外は2カラム型のままとする

02 . パララックスとは

日本語に訳すると「視差」と呼ばれる効果です。元はカメラ用語みたいですね。Webでは重なるように設置した画像の移動速度を調整することにより画面に奥行きを持たせる手法です。近くのものは早く動き、遠くのものはゆっくりに見えることで奥行きを表現します。

03 . jQuery+CSS3

スライダー部分は各要素と背景がスライドするのですが、jQueryとCSS3で表現しています。このためIEではちょっと動きが異なります。SafariやChrome、Firefoxなどで見てもらえるとちゃんと（？）それぞれの要素がズレて動くと思います。

実装方法はまたの機会に紹介できればと思います。サイトリニューアルでパワー使いすぎました(´ε｀;)

当ブログは出来立ての新参ブログなので1カラムのトップページを使って奇をてらってみたという下心もあるのですが、何よりも「スライダーやってみたかった」というのが大きいです。好きこそものの何とやらですね。楽しかったです：）

04 . おまけ

パララックス効果を使ったサイトではこちらが有名ですね。ページの最初（ヘッダー）から終わり（フッター）までずっと楽しめます。iutopi.com