2012年07月08日 category : Blog tags : ,

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

このエントリーをはてなブックマークに追加

renewal

トップページのデザインを変更しました。パララックス(視差)効果を使ったスライダーを設置です。

ブログのトップページデザイン変更しました。変更前のトップページは2カラム型でメイン側に最近の投稿を10件表示し、サイドバーにも並列して最近の投稿を5件表示していたのでなんだか重複感が気になっていたんです。

サイドバーの方を消せばいいんですけど、個別記事やカテゴリ一覧の場合はサイドバーに最近の記事一覧があったほうが良いかなと思ったので消せずにいました。そんな理由もあり、いっそのことトップページの方を変更しちまおう!ってことでリニューアルです。

01 . 変更箇所

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

02 . パララックスとは

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

03 . jQuery+CSS3

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

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

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

04 . おまけ

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

iutopi

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