CSS × jQueryのハイブリッドアニメーション

最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。

jQueryのアニメーションはカクカクでちょっと重い

jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CPUはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。

CSSのtransfromは早くて滑らか

CSSの「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。
jQueryとCSSを上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。

CSSアニメーションのコツ。
transformとleftだと滑らかさに違いが出る。

上側: transformX
下側: left

leftはピクセル単位でしか動けないので、カクカクしてしまう。transformは小数点での表示に対応しているので、カクカクしない。 pic.twitter.com/bncJzIJIoy

— 池田 泰延 (@clockmaker) 2019年7月5日

プラグインを使ってみる

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。

jonsuh.com

アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。

<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>