スマホでアニメーションするときはcss3の「translate3d」を使おう
Posted: 2011.09.16 / Category: javascript / Tag: CSS3, jQuery, アニメーション
スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。
Sponsored Link
jQueryのアニメーション
たとえばある要素をクリックしたときスライドするアニメーションをjQueryで書くとこんな感じですね。
javascript
$('#rect').click(function(){ $(this).stop().animate({'marginLeft' : '300px'}, 300); });
css3のアニメーション
同じことをcss3のtranslate3dでやる場合はだいたいこんな感じになります。
javascript
$('#rect').click(function(){ $(this).css({ '-webkit-transform':'translate3d(300px,0,0)', '-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)' }); });
ちょっと長くなってしまいますが、これだけでスマホでも滑らかに動くようになります。
なんでもtranslate3dはGPUで処理するんだとか。