3Dでぐるぐる回るjavascript「jquery 3d rotator」

実用性はあまりないかもしれませんが、リンクが3Dで面白い動きをするjquery 3d rotatorです。
商品画像にリンクを張ることで回転式の陳列が可能になるかもしれません。
j3DRotator

使用方法
jquery 3d rotatorからrotator.jsをjQueryからjquery.jsをダウンロードします。
*配布先サイトのスクリプトでは、hrefで位置を指定しているのでリンク先にいきません。
 当サイトではtitle属性に変更していますので、以下からダウンロードしてください。
 rotator.js
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/rotator.js" type="text/javascript"></script>
<style type="text/css">
html {overflow: hidden;}
body {background: #222;width:100%;height:100%;margin:0px;padding:0px;}
#x_axis {border:1px solid #555;width:100%;height:1px;position:absolute;top:50%;}
#y_axis {height:100%;width:1px;position:absolute;left:50%;}
#y_axis_line {border:1px solid #555;height:100%;width:1px;position:absolute;left:50%;top:0px;}
#links a {padding:0px;margin:0px;z-index:100;position:absolute;left:0px;top:0px;width:100%;height:100%;}
a {text-decoration: none;color:#fff;}
a:hover {text-decoration: none;background:#ff8000;color:#fff;}
a:visited {text-decoration: none;color:#fff;}
a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}
img {border:none;}
</style>

上記を記述し、回転させたいリンクを以下のように書き込みます。
<div id="y_axis_line"></div>
<div id="x_axis">
<div id="y_axis">
<div id="links">
<a href="" title="x=-340&y=240&z=-161">テキスト</a>
</div>
</div>
</div>

上記のtitleで初期位置をx軸、y軸、z軸を±360で指定します。
テキストと表記した場所は画像でもOKです。
3Dでぐるぐる回るjavascript「jquery 3d rotator」サンプル
*当サイトのタグも試しにやっています(重め)。
 Movable Typeから自動でタグを書き出し、titleにランダムで数字を挿入しています。
 タグ一覧

sponsors

「3Dでぐるぐる回るjavascript「jquery 3d rotator」」をシェアする

記事作成:
記事URL:

TOP > > > 3Dでぐるぐる回るjavascript「jquery 3d rotator」