奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」

奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」サンプル 画像などの要素を3Dぽく奥行き感ある感じで見せられると面白いです。
jQueryプラグインのjQuery Vortexを利用すると簡単に奥からやってくる感を演出できます。

使用方法 jQuery Vortexからファイルをダウンロード。
<link rel="stylesheet" type="text/css" href="vortex.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.vortex.js"></script>
<script type="text/javascript">
$(function(){
$('#id名').vortex({
initialPosition: 270, //最初の要素位置の角度 0, 90, 180, 270.
speed: 150, //速度
deepFactor: 0.8 //奥行き感。0だとflat、1だとずんと奥
});
});
</script>

あとは下記のように要素を記述していきます。
<div id="id名">
<div class="class名"></div>
<div class="class名"></div>
<div class="class名"></div>
<div class="class名"></div>
<div class="class名"></div>
<div class="class名"></div>
<!-- 要素分 -->
</div>

あとはCSSで表示サイズなどを調整しましょう。
#id名 {
width: 500px;
height: 300px;
position: relative;
}
.class名{
background:#606C88;
width:100px;
height: 100px
}

またストップ、スタートボタンは下記のようにします。
<button type="button" onclick="$('#id名').data('vortex').start();">Start</button>
<button type="button" onclick="$('#id名').data('vortex').stop();">Stop</button>

奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」サンプル

sponsors

「奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」」をシェアする

記事作成:
記事URL:

TOP > > > 奥行ある3Dぽい表現をさせられるjQueryプラグイン「jQuery Vortex」