CSS3でスマホで見ても滑らかに動くメニューをつくる

onclickでjquery使ってちょっと動的なメニューをつくっても、スマホでみると大体最悪になります。ガッタガッタになります。googleをスマホでみると左にメニューがありそれはすばらしくスムーズに動きまして、どこかのサイトでそのメニューを再現されていました。まだしっかりコードなど見ておりませんが、javascriptでクラスを変えて、その結果cssのanimationが動き出すような感じにしてあるそうです。また3Dうんちゃらとかいう謎のものも設定しているそうです。さらにgoogleでは物理計算？的なこともしているそうで、なおさらリアルななめらかさを実現しているということでした。GPUアクセレータとかいうやつを使うとiPhoneで超速くなるみたいなことも書いてありました。

今回作成するメニューはスマホ対応ということでタッチしたらメニューが開いて、再びタッチするか、別の場所をタッチすると、メニューが閉じるやつで、なおかつ、Androidで見てもiPhoneで見てもスムーズに動くやつを想定しております。

jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。ここに書いてある、jquery.animate-enhanced pluginを使ってみたいと思います。iPhoneではやいし便利だよということなんで素晴らしそうだと思いました。ライセンスはマサチューセッツ工科大学です。