今やWebサイトを彩るのに主流といっても過言ではないjQuery。
とても便利で使いやすく構成されていますが、スマートフォン向けサイトなどで使用する場合は
レスポンシブWebデザインが重要視されている昨今に対して、
ライブラリファイル自体の重さの負荷が懸念点としてあげられてしまいます。
そんなjQueryをスマートフォン向けに最適化したJavaScriptライブラリ
「Zepto.js」がこの先便利に使えそうだったのでご紹介してみます。
Zepto.js
使い方はライブラリファイルである「zepto.js」を読み込んだ後に
jQueryと同じような記述方法でいろいろなアクションを組み込むことができるようになっています。
「zepto.js」で使うことができるアクションやイベントは
上記のライブラリページの左側に一覧で表示されています。
見て分かる通りjQueryと同様の記述でスクリプトを組むことができるようになっています。
試しに画面上の■をクリックすることで
サイズを拡大しながら位置を移動して、移動完了後に色を変える、
といった動作のサンプルを紹介してみます。
HTMLに実行させるオブジェクトを
ID名「#shape」で用意したとします。
◆HTML <div id="shape"></div>
これに対してのスクリプトは以下のように。
◆SCRIPT
<script type="text/javascript" src="js/zepto.js"></script>
<script>
$(function(){
var animComplete = function(){
$('#shape').css({background:'#000'});
}
$('#shape').click(function(){
$(this).anim({left:'400px',width:'150px',height:'150px'},1,'linear',animComplete);
});
});
</script>
「#shape」がクリックされたら「.anim()」アニメーションを使って
「left」の値を変えて、同じく「width」と「height」も大きくしています。
「.anim()」の最後に書かれている「animComplete」が
アニメーション完了後に実行させるfunction名になっており
上に書かれている「var animComplete = function(){」の
背景色を変更させる内容のアクションがアニメーション完了後に実行されます。
実際の動作は以下の様になります。
※画面上の■をクリックしてみてください。（やり直す際は「リロード」を押してください）
この様な感じでjQueryと同じ感覚でアニメーションだけでなく
さまざまなアクションを実装することが可能になっています。
アニメーション用の動作に関しては
CSS3のTransformプロパティもサポートされているので
————————————-
・translate（X|Y|Z|3d）
・rotate （X|Y|Z|3d）
・scale（X|Y|Z）
・matrix（3d）
・perspective
・skew（X|Y）
————————————-
これらのプロパティを簡単にアニメーションさせることも可能になっています。
「Zepto.js」の資料としては、ちょっと古いものですが参考になりそうなスライドもありました。
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
この「Zepto.js」は真新しいJSライブラリといったものではないですが
クックパッドさんでも使用されているらしく
軽快な動作が必要になってくるスマホ系のサイトでは今後も重宝しそうです。
ご参考までに。。。