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

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

サイトのキャプチャ

GFX
GFX -GitHub

GFXのデモ

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

デモのキャプチャ

デモ:Flip

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

デモのキャプチャ

デモ:Explode

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

デモのキャプチャ

デモ: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");
});

top of page

©2017 coliss