2014/08/27

フラットかつ3D回転するUIが作れるjQueryプラグイン「TURNBOX.js」

フラットかつ3D回転するUIが作れるjQueryプラグイン「TURNBOX.js」

要素を3D回転させられるjQueryプラグイン「TURNBOX.js」をご紹介します。
立体的なアニメーションエフェクトを与え、3DなUIを再現することができます。
TURNBOX.js

動作サンプル

このようにボタンやタブをクリックすると要素が回転します。
フォームやローディング、タブやフォームなど幅広い要素に対応できます。
jQueryの使用を最小限に抑え、基本的にCSSで実装されているため、動作がサクサクしていてとても快適です。
TURNBOX.jsでDEMOが用意されているので一度動きを確認してみてください。

使い方

Set up

まずはjQuery本体とturnBox.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/turnBox.js"></script>

HTML

適用したい要素の直下に2~4つの子要素を設置します。
5以上の子要素がある場合は削除されるので注意してください。

<div class="sample">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

JS

デフォルトの値は以下で、それぞれ変更が可能です。

$(".sample").turnBox({
  width: 200,
  height: 50,
  axis: "X",
  even:,
  perspective: 800,
  duration: 200,
  delay: 0,
  easing: "linear",
  direction: "positive",
  type: "real"
});
width ボックスの横幅。
height ボックスの縦幅。
axis 回転軸の設定。"X"なら縦回転、"Y"なら横回転。
even 偶数面の長さ。axis: "X"なら縦幅、"Y"なら横幅に設定されます。設定しない場合は等幅になります。
perspective パースペクティブの強さ。
duration アニメーションの時間。
delay アニメーションを開始するまでの時間。
easing アニメーションの緩急。transition-timing-functionで設定できるeasing、ペジェ曲線を入力できます。
direction 回転方向の設定。"negative"で逆回転します。
type 回転アニメーションを以下の3種類から選択できます。

まとめ

カクついたりすることなく動作が軽いのがとても魅力的です。
「TURNBOX.js」を取り入れることで、数多く存在するフラットデザインで他サイトとの差別化もできそうです。
是非試してみてはいかがでしょうか。