[JS]簡単な記述で、3Dのアニメーションをエレメントに与えるスクリプト -GFX

回転・拡大・振動など、エレメントに3Dのアニメーションを加えるjQueryのプラグインを紹介します。

GFX
GFX -GitHub

[ad#ad-2]

• GFXのデモ
• GFXの使い方

GFXのデモ

デモのベストビューは、Webkit系ブラウザ（Chrome, Safari）です。
※Firefoxのサポートは計画中、とのことです。

デモ：Flip

パネルがアニメーションで裏返しになります。

デモ：Explode

パネルが爆発するように拡大します。

[ad#ad-2]

デモ：Shake

パネルが左右に震えます。

デモ：Crazy

前述のエフェクトを含め、さまざまなアニメーションのミックスです。

GFXの使い方

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>  
<script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>  

JavaScript

スクリプトの基本書式はシンプルです。

$("#element").gfx(properties, options)

「properties」はCSSの様に記述します。

$(this).gfx({
  scale: "1.5",
  rotate: "180deg"
})

スクリプトのオプション

duration

アニメーションの持続時間

easing

アニメーションの種類

complete

アニメーション終了時のコールバック関数

queue

使用するアニメーションのキュー

アニメーションはjQueryアニメーションと同様に、つなげることもできます。

.gfx({
  rotate: "0deg",
  translateX: "-100px"
}).delay(100).gfx({
  scale: "1"
}).gfx({
  rotate: "0deg",
  translateX: "-100px"
})

Flipの実装

デモにあるFlipを例に、実装を紹介します。

エフェクトごとにスクリプトがプラグイン化されているので、外部ファイルを追加します。

<script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>

HTMLは、パネルの表と裏を配置します。

<div id="flip">
  <div class="front">Front</div>
  <div class="back">Back</div>
</div>

JavaScriptは、パネルがクリックされたらFlipするように設定します。

$("#flip").gfxFlip().click(function() {
  return $(this).trigger("flip");
});