スマホでもOK！パララックスサイト制作に便利なjsライブラリ

2012年あたりに流行ったパララックスサイトですが、ライブラリも多数出回っているので簡単に実装できるのですが、スマホでも、となるとどのライブラリでもOKというわけではないようです。

パララックス効果とは「遠くのものは遅く近くのものは早い」という動きをさせることにより視差効果で奥行きがあるように見せる、というものです。

※最も基本的なパララックスの動きサンプルサイト
http://dev.jonraasch.com/scrolling-parallax/examples/scrolling-parallax

最近ではパララックスもスクロール連動アニメーションもひとくくりにパララックスサイトと呼ばれている？ようですね。

で、パララックスやスクロール連動アニメーションをスマホでも、となるとライブラリも限られてくる（スマホだと動かないとかandroidだと落ちるとか、、、）ので、スマホ対応JavaScriptライブラリをいくつか紹介したいと思います。

■skrollr

Android／iOS／PC 全て対応のパララックススクロールライブラリです。
jQueryを使用しておらずスタンドアローンのJavaScriptライブラリです。
デモが豊富なのでおそらくやってみたいことのほとんどはこのデモの応用で可能なのではないでしょうか。
デモサイト：http://prinzhorn.github.io/skrollr/
nikeのこちらのページでもskrollr.jsが使われています。
http://hypervenom.nike.com/
ライセンスはMITです。
ダウンロードはこちらから
https://github.com/Prinzhorn/skrollr

■ScrollTween.js
モバイルで動くパララックススクロールアニメーションライブラリです。
シーエーモバイルのサイトhttp://www.camobile.com/を制作の際、ゼロから書き起こし公開したのがこのScrollTween.jsだそうです。
こちらでその経緯が見れます。なかなか興味深いです。http://www.slideshare.net/shumpei/j-query-mobile-14227660
jQueryベースでライセンスはMITです。
ダウンロードはこちらから
https://github.com/camobile/ScrollTween.js

■Cool Kitten

まだbeta版のようですが、作者が猫好きのようなので載せます（笑）。
パララックススクロールもできるレスポンシブグリッドレイアウトのフレームワークです。一応スマホ対応ですが、、、スマホで見ると背景の動きが、、、ちょっといまいちぎこちない、、、が、猫好きなので、、、、、、良しとします。
http://jalxob.com/cool-kitten/
コードもシンプルなので「PCベースで簡単にスクロールだけさせたい、スマホはまぁとりあえず動いてればいいや」、というアバウトな猫好きの方におすすめです。

jQueryベースでStellar.jsを使用しています。
ダウンロードはこちらから
https://github.com/jalxob/cool-kitten

というわけでいくつかjsライブラリを紹介しましたが、一番最初に紹介した「skrollr」で全て事足りるような気がします。
こちらにskrollrを実際に使用したサイト一覧があるのでチェックしてみてはいかがでしょうか。
https://github.com/Prinzhorn/skrollr#in-the-wild

いや～ライブラリってホントに有り難いですね。
byゼロからJavaScriptが書けないwebデザイナーより