究極のパララックスサイトを作るなら、必ず1度はparallax.jsを見るべし!

parallax

特殊なメガネをかけて見る3Dテレビや、裸眼で立体的に見えるゲームスマホが流行ってきた頃、WEBデザイナーApple3Dなんて必要ないと言わんばかりに”視差効果“を使ったデザインが流行りだしたことを今でも覚えています。
WEB2.0と言われていた時代には、凹凸や影を付けて立体的に見せるデザインが流行っていましたが、今ではフラットデザインになり、マウスカーソルの動きやスクロール、ジャイロセンサーの動きに合わせて視差効果を出しています。

視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。
パララックス (英:parallax)ともいう。
視差 – Wikipedia

parallax.js

日本でパララックスがまだ主流でなかった頃、あるWEBサイトを見てとても衝撃的だったのを覚えています。
スクロールするだけのWEBサイトなんて、無料のテンプレートを配布しているほど数多く存在しますが、究極のパララックスと呼ぶべきサイトがこちら!

parallax.js


parallax.jsの凄いところは、PCはマウスカーソルスマホジャイロセンサー(傾き)でそれぞれ両方の動きに反応するようになっていて、画面の向きも縦横選ばず、どんな解像度にも対応していること。
しかも、デザインだけでなく、CSS3アニメーションを駆使しているので、見て触るだけでとても気持ちいです。
これ作った人、まさに天才だと思いました。
ダウンロード、使い方はこちらから。 GitHub – wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart deviceちなみに、AppleならiOSで話題になった壁紙視差効果ですね。
今ではバッテリーが消耗するということで嫌がられているみたいですが…。

iOS 視差効果


出典:iOS 7: Instead of Flatness, We Got Depth

WEBデザインのトレンド

最後に革新的なWEBデザインを集めたサイト”Awwwards“から少しだけ紹介します。 Awwwards – Website Awards – Best Web Design Trends

AWWWARDS

The hunt for the Cheshire Cat – Awwwards Nominee Adult Swim – Elastic Man
/> 残念ながら需要はあまりないように感じますが、こんな凄いサイトを見ると刺激を受けて作りたくなってしまいます。


Amazonベストセラー