最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。
jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CUPはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。
CSS3の「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。
jQueryとCSS3を上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。
以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。
ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。
今回はhoverでは無く、jQueryのclickイベントを使ってtransformを適用させるようにしてみましょう。
<script> $(function() { $('.box').on('click', function() { //div.boxをクリックしたら }); }); </script>
toggleClass(class名)
指定したCSSクラスが要素に無ければ追加し、あれば削除する。
<script> $(function() { $('.box').on('click', function() { //div.boxをクリックしたら $(this).toggleClass("red"); //div.boxにクラス名redが追加される }); }); </script>
slideToggle(スピード)
各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。
アニメーション効果は指定したスピードで実行されます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。
<script> $(function() { $('.box').on('click', function() { //div.boxをクリックしたら $(".menu").slideToggle(200); }); }); </script>
