要素を立体的に回転させて動かすエフェクトTURNBOX.jsの実装方法

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌

だんだんと秋の気配が近づいて過ごしやすくなりましたね。
なんだかゴロゴロしたくなってきます<( ˘ω˘ ┌┛)┌┛

ってなわけで今回は、要素を立体的にゴロンゴロン動かせるプラグイン
TURNBOX.jsをご紹介しますc⌒っ´ʘ‿ʘ｀)っ

実装方法

それでは実装方法を解説していきます( ˘ω˘)☝

はじめに

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

divの中に表示させたい面の数の子要素を配置しましょう( ˘ω˘)☝
最低2個、最大4個表示させることができます。
5個以上の子要素がある場合、余った分は表示されなくなりますので、お気をつけくださいまし( ˘ω˘)☝

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

class

面の子要素に用意されたclassをつけます。
テキストを入れる際にはまた要素を追加してくださいまし( ˘ω˘)☝

<div class="sample">
     <div class="turnBoxButton color_red"><span>Sample1</span></div>
     <div class="turnBoxButton color_blue"><span>Sample2</span></div>
     <div class="turnBoxButton color_yellow"><span>Sample3</span></div>
     <div class="turnBoxButton color_green"><span>Sample4</span></div>
</div>

それぞれこのようなclassが用意されております( ˘ω˘)☝

/*---動かしたい要素に追加--*/
"turnBoxButton"

/*--"turnBoxButton"と一緒に追加--*/
"turnBoxButtonEventClick"
"turnBoxButtonEventMouseover"
"turnBoxButtonEventMouseup"
"turnBoxButtonEventMousedown"
"turnBoxButtonEventMousemove"
"turnBoxButtonEventMouseout"
"turnBoxButtonEventTouchstart"
"turnBoxButtonEventTouchmove"
"turnBoxButtonEventTouchend"

JS

先ほど用意したclassにJSを指定してあげましょう( ˘ω˘)☝
これでゴロンゴロンできるようになります。<( ˘ω˘ ┌┛)┌┛

$(".sample").turnBox();

オプション機能

オプションは以下のとおりです。
お好きなサイズやアニメーションにカスタマイズしちゃいましょう( ˘ω˘)☝

/*--Defaults--*/
$(".sample").turnBox({ 
     width: 200,　//ボックスの横幅
     height: 50,　//ボックスの縦幅
     axis: "X",　//回転軸の設定　X=縦　Y=横
     even:,　//偶数面の長さ
     perspective: 800, //パースの数値
     duration: 200, //アニメーションの時間
     delay: 0, //アニメーションするまでの時間
     easing: "linear", //アニメーションの動きの設定
     direction: "positive", //回転方向の設定
     type: "real" //real,repeat,skipがあります。
});

これで完了になります✌(´ʘ‿ʘ｀)✌
できあがったものはこちらでご確認いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ

DEMO

まとめ

いかがでしたでしょうか？

ボタンに限らず要素全体に使えるので、おもしろいUIになりそうです。
シンプルでフラットなデザインにもピッタリです！

今後も面白そうなエフェクトやプラグインを探して、いろいろと提案できるよう精進していきたいものです( ˘ω˘)☝

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。