スマホに対応した高度なパララックスイフェクトを実現「parallax.js」
parallax.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
GitHubのエラーページで使われているパララックスイフェクトがとても面白いです。通常なら嫌がられる存在のエラーページがパララックスイフェクトによって凄いと賞賛されるほどです。そんなGitHubまたはそれ以上のパララックスイフェクトを実現できるライブラリがparallax.jsです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 20.01.29.1378123822.png)
グラフィックスがとても奇麗です。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 20.01.34.1378123838.png)
マウスの移動に合わせてグラフィックスが動きます。
[](http://images.moongift.jp/2013/09/2013-09-02 21.06.48.1378123868.png)
スマートフォンの場合は傾きセンサーによってグラフィックスが移動します。
parallax.jsはデスクトップであればマウスカーソルの動きに合わせてオブジェクトが動きます。動き方はparallax.jsによって定義された深さによって異なります。さらにスマートフォンやタブレットであればデバイスの傾きによって見える向きを変更できるようになっています。
MOONGIFTはこう見る
マウスの追従もさることながら、スマートフォンの傾きによってパララックスイフェクトを起こすのはとても面白いです。これでページを作ればかなりのインパクトになるでしょう。コンテンツの作成は大変そうですが、それだけの価値はありそうです。
訪問者にインパクトを残すためには、普通と違う動きを見せるのが大事です。かといって意図した動作と全く違う動きをしても意味がありません。ほんの少しずれた感覚を提供すると目を引くコンテンツに仕上がるのではないでしょうか。