jQuery・Reel Pluginについて
jQuery・Reel Pluginについて
Reel Pluginは画像を3Dの様に動作させるプラグインだ。使うと立体的に見えて色々な角度から見える。スクロールすると角度を変えられるため商品のディスプレイには役に立ちそうだ。
ただし当然すべての角度の画像がたくさん必要になる。
また新しいバージョンのjQueryには対応していないようだ。jQuery-1.6で動作確認済み。
- フラッシュで縦300px*横300pxリングの画像を作る。
- モーショントゥイーンで3D回転させる。
- 36フレームで3D回転をしたムービーを作る。
- jpegシーケンスで縦300px*横300pxの画像36個に書き出し。
- 36個に書き出された画像をフォトショップで縦1800px*横1800pxで縦6列横6列に並べる。
- 縦1800px*横1800px画像で書き出し。※かならずファイル名は○○-reel.jpg(gif)とする。
- jqueryを読み込ませ、HTML以下のように打つ。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>reel</title>
<script src="jquery-1.6.min.js" type="text/javascript"></script>
<script src="jquery.reel.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#ring').reel({frames:36});});<!--36は合成画像数-->
</script>
</head>
<body>
<img id="ring" src="ring.jpg" width="300" height="300" alt="ring">
</body>
</html>
- 完成イメージ
