WEB

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

要素を立体的に回転させて動かすエフェクト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があります。
});

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

まとめ

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

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

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

この記事を書いた人

はやち
はやち フロントエンドエンジニア 2010年入社
フロントエンドエンジニアのはやちです( ˘ω˘)☝
以前までは顔隠しておりましたが思い切ることにしました…。
相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌
今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ