Blog

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】

2015.05.12Cat:css3 jQuery デザイナー

jQueryを使うと、手軽にアニメーションを実装することができて、とても便利です。

しかし、jQueryによるアニメーションは処理がどうしても重くなります。

特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、

jQueryによるアニメーションがもっさりとした動きに感じることが多いのではないでしょうか。

 

jQueryのアニメーションは、通常CPU(コンピュータの総合的な演算装置)により処理されています。

CPUは元々画像処理だけに最適化されたものではない上に、アニメーションだけでなくコンピュータ全体の演算を担っているため、

CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。

 

では、Webサイト上でスマホのネイティブアプリのように滑らかなアニメーションを実装する方法はないのでしょうか?

 

CSS3にはtransformのプロパティの中に、translate3d、scale3d、rotate3dなど、「3d」がつくものがあります。

これらをTransform3Dといいますが、実は、これらの処理はCPUではなくGPU(グラフィックを専門に処理する演算装置)により行われるため(参考サイト)、アニメーションがスマホのネイティブアプリ並みに滑らかになります。

GPUは画像処理を専門的に扱う演算装置なので、アニメーションなどの画像処理が得意です。

そのため、GPUを使って処理しているTransfomr3Dによるアニメーションは滑らかになります。

 

今回はそのTransfomr3DによるアニメーションをjQueryと合わせて実装する方法を、1つご紹介いたします。

 

↓Transfomr3Dのアニメーションを使ったサイドメニュー

DEMO1

 

↓jQueryのアニメーションを使ったサイドメニュー

DEMO2

 

方法

手順

  1. Transform3Dに対応していないデバイス向けに、CSSを設定しておく
  2. Modernizr.jsを使って、デバイスがTransform3Dに 対応しているかどうか調べる
  3. デバイスがTransform3Dに対応していたら、Transform3Dによるアニメーションを行うために、jQueryでCSSの書き換えを行う
  4. アニメーションを実装する

 

Transform3Dに対応していないデバイス向けに、CSSを設定しておく

Transform3DはGPUを使用しているため、デバイスのGPUが古い場合、Transfomr3Dに対応していない場合があります。

また、IEの9以下でも利用することができません。

そのため、現段階では、Transfomr3Dに対応したデバイスやブラウザ以外では、jQueryによるアニメーションを行うようにしておきます。

そのため、最初のCSSの設定は、jQueryによるアニメーションを前提としたものを設定しておきます。

 

↓こちらは、スライド式のサイドメニューを実装する場合のものです。

HTML body内

 

CSS

 

Modernizr.jsを使って、デバイスがTransform3Dに 対応しているかどうか調べる

Transform3Dに対応しているかどうかの判定は難しいいところなので、Modernizr.jsというプラグインを使います。

公式サイトからダウンロードして配置し、読み込みます。

Transfomr3Dに対応していれば、htmlタグに「csstransforms3d」というクラスが追加されつので、それを元に判定を行います。

 

HTML head内

 

JavaScript

 

デバイスがTransform3Dに対応していたら、Transform3Dによるアニメーションを行うために、jQueryでCSSの書き換えを行う

Transform3Dでアニメーションを実装する場合、jQueryでアニメーションする場合と初期のCSSの設定が変わってくるので、

デバイスがTransform3Dに対応している場合はjQueryを使ってCSSの初期設定を変更します。

 

JavaScript

 

アニメーションを実装する

最後にjQueryでアニメーションの実装部分を記述します。

Transfomr3Dに対応していないデバイス向けに、jQueryのアニメーションも場合分けして記述します。

 

JavaScript

 

jQueryのアニメーションをTransform3Dによるアニメーションに置き換えるときは、

どうすればそれまでjQueryで実装していた動きを、

Transform3Dを使ったアニメーションで再現できるかということが、鍵になってくると思います。

 

より快適なサイトづくりのため、どんどんTransform3Dを使ったアニメーションへの移行に挑戦していきたいです。

 

参考サイト

【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方 (フェンリル | デベロッパーズブログ)

Web制作にGPU処理を取り入れる|Web制作 W3G

transform 3D-CSS3リファレンス

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ