3Dのキューブのアニメーション効果をWeb上に「jQuery Trid」
当ページのリンクには広告が含まれています。
スポンサーリンク
3Dのキューブのアニメーション効果をWeb上に実現するプラグイン「jQuery Trid」を紹介します。
jQueryプラグイン「jQuery Trid」
このプラグインを使えば、指定したDOM（Document Object Model）をアニメ効果付き3Dキューブに変換することができます。
マウスを使って、画面をドラッグ・アンド・ドロップするとキューブが動いたり、自動的にくるくる回したりといったおもしろいプラグインです。
スポンサーリンク
デモで3Dキューブをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="jQuery Tridのデモでーす。">
<title>jQuery Trid - jQueryプラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.trid.js"></script>
<style>
div.sprite {
width: 1200px;
height: 1200px;
top: -600px;
left: -600px;
border: 1px solid blue;
font-size: 100px;
background-size: cover;
}
div.sprite h3 {
margin-left: 100px;
}
</style>
<script>
$(function() {
$('#view').tridView({useMouse: true});
$('#box').trid({z:-1000});
$('#box1').trid({rx:90,y:-600});
$('#box2').trid({rx:-90,y:600});
$('#box3').trid({ry:90,x:600});
$('#box4').trid({ry:-90,x:-600});
$('#box5').trid({rz:180,z:-600});
$('#box6').trid({rz:0,z:600});
a = 0;
window.setInterval(function() {
$('#box').trid({rz:a+=0.1,rx:a*0.77,ry:a*1.13});
$.tridTick();
},1);
});
</script>
</head>
<body>
<h1>jQuery Tridのでもでーす。</h1>
<p>ドラッグ・アンド・ドロップすると!?</p>
<div id="view" style="z-index: -1">
<div id="box">
<div id="box1" class="sprite"><h3>①</h3><p>くるくる回る</p></div>
<div id="box2" class="sprite"><h3>②</h3><p>六面体</p></div>
<div id="box3" class="sprite"><h3>③</h3><p>ドラッグ・アンド・ドロップしてみてー</p></div>
<div id="box4" class="sprite"><h3>④</h3></div>
<div id="box5" class="sprite"><h3>⑤</h3></div>
<div id="box6" class="sprite"><h3>⑥</h3></div>
</div>
</div>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» jQuery Trid
スポンサーリンク