任意の要素を3D回転させ、立体的に見せる国産のjQueryプラグイン・TURNBOX.js

スポンサーリンク

任意の要素をアニメーションエフェクトで立体的に見せる、というスクリプト・TURNBOX.jsのご紹介。フラットなデザインと相性良さそうです。

要素に立体的なアニメーションエフェクトを与えて、3DなUIにする事ができます。フラットなデザインに使って欲しいとの事です。開発者さんはNOHTさんという日本の企業さんなので疑問があった場合でも連絡が取りやすいので安心ですね。

TURNBOX.js

動作サンプルです


他にもアップロードのローディングに使えたりいろいろ応用幅が広い印象です。

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

↑ 本体とプラグインを読み込みます。

$(".foo").turnBox({
  width: 200, //ボックスの横幅の値を指定
  height: 50, //ボックスの縦幅の値を指定
  axis: "X", //回転軸
  even:, //偶数面の長さ
  perspective: 800, //パースペクティブの強さを指定
  duration: 200, //アニメーションの時間
  delay: 0, //動作開始までの待ち時間
  easing: "linear", //イージングの指定
  direction: "positive", //回転方向の設定
  type: "real" //回転アニメーションの種類を設定
});

↑ セッティング諸々。

アニメーションは極力CSSで動かしてるみたいですね。スマフォ等でも滑らかな動きをしてくれそうですね。

ライセンスはMITとの事です。詳細は以下にてご確認下さい。

TURNBOX.js

URL :
TRB :

Comments & Trackbacks (2)

  1. Norix7

    コメント欄の上にある文章「トラックバックはお受けいていません。」になってますよ。記事に関係なくてすみません。

  2. ビデオコンバーター

    (´つヮ⊂)ウオォォwwwwすんごい~~~

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Leave a Reply

Ads

Posts

Contact

Services