スマホでも見れるパララックス効果を使用したサイトがすごい！！

2012年7月12日から shibatsuji | 1件のコメント

パララックスウェブデザインって？

前回のレスポンシブウェブデザインのブログに引き続き、最近流行っているパララックスウェブデザインに関してもいろいろと調べてみました。
パララックスウェブデザインとは、Flashを使わずにJavascriptやCSS3ののアニメーションなどを使って、スクロールすると複数の要素が奥行きのある視覚効果を生み出す「パララックス効果」を利用したウェブデザインのこと。

パララックスと言う言葉は、カメラ用語として使われていて
コンパクトカメラで光学ファインダを使用して撮影した際、ファインダ越しで決めた構図と、実際に撮影された写真の構図とに差が生じる事

を指します。

いろいろ調べていくと、ナイキやアディダス、グーグルなどがキャンペーンで行っていたり、企業のウェブサイトでも最近は広く利用されていることが分かりました。国内外の事例がまとまっているサイトは下記にまとめましたので、ざっとご確認ください。

・参照記事
最新の国内のパララックス効果を使用したサイトをまとめました
http://webdesignmatome.com/webdesign/parallax_jp
最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました
http://webdesignmatome.com/webdesign/parallax
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ
http://kachibito.net/web-design/parallax-scroll-inspiration.html
【2012年のWEBデザイン】流行決定！パララックスなWEBサイト【CSS3/HTML5】
http://matome.naver.jp/odai/2132488718618912101
優れたパララックスサイト
http://bit.ly/OEPsNh

スマホでもパララックス効果を使用！！

PCブラウザベースの事例はいくつもあるのですが、スマホでの事例がなかったので、調べてまとめました。

1.NIKE「CHOOSE YOUR FIGHT」

マイケル・ジョーダンの名前を冠したシグネチャーモデルの最新作「Air Jordan 2012」のPRサイト「CHOOSE YOUR FLIGHT」は、画面を下にスクロールするだけで、中の要素がタテ・ヨコ・ナナメに動き、それも立体的に見えるしかけを作っています。

トップ画面からスクロールしていくと、最初は「CHOOSE YOUR FIGHT」と言う文字がバラバラになり、さらにどんどんスクロールしていくと、戦闘機の形をした靴と「FLY OVER」と書かれた靴底が現れ分解し、それが合体し商品である靴になる。
同じくF1マシンの形をした靴と「FLY AROUND」と書かれた靴底、戦車の形をした靴と「FLY THROUGH」と書かれた靴底とがスクロールする度に分解され、合体するという動きをする。