ボタンのhoverやon/offなどでたまに見られる3Dでのボックス回転を実装するためのjQueryプラグインTURNBOX.jsを紹介します。
ボタンやタブくらいでしか見たことがなかったですが、上記の公式サイトのデモを見ると魅力的なサンプルが揃っています。DIALOGやFORMでの使い方が楽しいですね。
用意するもの
まずはGitHubからプラグイン一式をダウンロードしましょう。
必要なものは本体のturnBox.jsとjqueryとなります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/turnBox.js"></script>
基本的な使い方
仕組み的には、回転させたいボックスの全面を括ったタグを指定し、指定されているclass名で設定したボタンをクリックするとタグの並びの上から順に回転していきます。
言葉にしてもわかりづらいと思うのでコードごとに見てみましょう。
<!—- rotateBoxで括られているdivたちが回転する一面ずつになります -—> <div class="rotateBox"> <div>面１<p class="turnBoxButton">回転ボタン</p></div> <div>面２<p class="turnBoxButton">回転ボタン</p></div> <div>面３<p class="turnBoxButton">回転ボタン</p></div> <div>面４<p class="turnBoxButton">回転ボタン</p></div> </div>
一面のタグの中にある turnBoxButtonクラスを持ったオブジェクトは、回転させるためのボタンになります。
//面をくくっているタグでturnBoxを呼び出してオプションを設定します。
$(".rotateBox").turnBox({
width: 200, //幅指定
height: 70, //高さ指定
axis: "X", //回転の方向指定
perspective: 800, //遠近の設定。値が小さいほど遠近感が大きくなる。
duration: 200, //回転にかかる時間の指定
delay: 0, //ボタンを押してから回転が始まるまでの時間
easing: "linear", //イージングの設定
direction: "positive", //回転方向。逆はnegative。
type: "real" //アニメーションのタイプ。"real","repeat","skip"
});
オプションの詳しい解説は公式をご参照ください。
ここまでで、ボタンに指定したタグを押せば基本的には動きます。
ただstyle当てないとちょっとわかりづらいので簡易styleも入れてみましょう。
/* turnBoxを呼び出すと面のタグひとつひとつにこのclassが付与される */
.turnBoxFace{
background: #fff;
color: #fff;
border: 3px solid #000;
}
/* 各面に個別のclassを当てたい場合は、下記が自動で付与されています */
.turnBoxFaceNum1 {
background: #ee8;
}
.turnBoxFaceNum2 {
background: blue;
}
.turnBoxFaceNum3 {
background: green;
}
.turnBoxFaceNum4 {
background: gray;
}
ここでひとつ面白かったのは、例えば括り内の要素は増やしたかったら増やせるのかな？と思って、増やしてみたところ4つ以上はタグを増やしても消されるし、4つ以下では回転のループをさせることが出来ません。
徹底して現実の”立方体を回す”感じを再現しているからなのか、現実ではおきない３面での回転や４面以上の回転は出来ないようです。なんだか作者のこだわりを感じます。
公式を見る限り、他にもhoverやタッチにも対応しているようなのでスマホでも使いやすそうです。
一面のボックスの大きさを変えてみたり、ボタンを外側に置いてみたりも出来るみたいなので機会があれば挑戦してみたいと思います。
