ぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。
これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。

SpriteSpin

最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。
jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。
(非minifyのspritespin.js:26.5KB)

<!-- 画像を表示するHTML -->

<div id="spritespin">
</div> 
<!-- JS -->
<script type="text/javascript">

$(function(){$("#spritespin").spritespin(({

width     : 480,
height    : 327,
frames    : 34,
framesX   : 6,
//スプライトシート利用時の列数
behavior  : "drag",
module    : "360",
sense     : -1,
//ドラッグ時の回転方向
source    : "シーケンス画像パスの配列 or スプライトシート画像パス",
animate   : true,
//アニメーションで回転させるか
loop      : true,
//アニメーションをループさせるか
frameWrap : true,
//無限に回転するか
frameStep : 1, 
//アニメーション時のフレーム間隔
frameTime : 60,
//アニメーション時のフレーム更新の時間間隔
enableCanvas : true

//Canvasタグで表示するか否か});});

</script>

特徴

  • 描画方法が3種類用意されている
  • 操作方法が4種類用意されている
  • Canvasが利用できる

様々なOptitonが用意されていますが、この中のmoduleとbehaviorについてご紹介します。

moduleでは「360」「panorama」「gallery」の3つの画像描画方法を用意されています。

  • 「360」は360度回転表示されるモジュール
  • 「panorama」はパノラマ撮影された風景などを表示するのに適したモジュール
  • 「gallery」は画像スライドショーの表示に適したモジュール

Behaviorsでは「Drag」「Hold」「Click」「Swipe」の4つの画像操作方法が用意されています。

  • 「Drag」はドラッグ操作で画像回転などが可能。主に「360」「panorama」表示時に適しています
  • 「Hold」はマウスダウン中(ホールド)に画像回転などが可能
  • 「Click」はクリック操作で画像切替などが可能。「gallery」表示時に適しています
  • 「Swipe」はモバイル端末でのスワイプ操作で画像切替などが可能。「gallery」表示時に適しています

上記のmodule/Behaviorsはカスタマイズが可能で、独自の描画方法や操作方法を作って指定することもできます。詳しくはCustomizationsのページにサンプルが記述されています。その他制御用の関数もいくつか用意されており、動的なオプションの変更やフレーム操作も可能なようです。
公式サンプル

THREESIXTY SLIDER

2番目にご紹介するのは慣性スクロールが可能なプラグインTHREESIXTY SLIDERです。
MIT & GPLライセンスのもとで公開されているプラグインで、明確なバージョン記載は見当たりませんでしたが、jQuery-1.8.3 以降では動作するようです。公式ページには対応ブラウザは各種PC用ブラウザ(IE6以降)のみ明記されてますが、タッチ操作も対応しているようです。
(threesixty.min.js:5.45KB)

<!-- 画像を表示するHTML -->
<section class="container-fluid" id="container"><div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images">
</ol>
</div>
</section> 
<!-- JS -->
<script type="text/javascript">
window.onload = init;function
init(){$('.product1').ThreeSixty({totalFrames: 72,
// フレーム数
endFrame: 72,
// 最終フレーム番号
currentFrame: 1,
// スタート時のフレーム番号
imgList: '.threesixty_images',
// 画像表示場所のセレクタ
progress: '.spinner',
// プログレス表示場所のセレクタ
imagePath:'assets/product1/',
// 画像フォルダパス
filePrefix: 'ipod-',
// ファイルプレフィックス
ext: '.jpg',

// 画像ファイル拡張子

height: 265,
width: 400,
navigation: true,
//previous,
play,
nextのナビゲーション表示有無});}

</script>

特徴

  • 3つの中では最軽量
  • フルスクリーン表示プラグイン同梱

SpriteSpinとの違いはスプライトシートがサポートされていない替わりに、THREESIXTY SLIDERには「threesixty.fullscreen.js」といったフルスクリーン表示用プラグインも同梱されていたり、ウィンドウサイズに応じて画像サイズも変わるレスポンシブル対応設定も可能です。ドラッグ操作で360度ぐるぐる回したいだけ、であればTHREESIXTY SLIDERでよいかも知れませんね。各種Configや関数、サンプルの類はコチラのgithubページに掲載されています。

reel

最後にご紹介するのは3つの中では一番高機能なプラグインreelです。
jQuery-1.6.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。
(jquery.reel-min.js:20.3KB)

<!-- HTMLタグのみで実装する場合 -->

<img src="f1.jpg" 
width="276" 
height="126"
class="reel"id="image"
data-image="
f1-reel.jpg"
data-frames="35"
data-footage="6"> 
<!-- HTML+JS --><img id="image" 
src="f1.jpg" 
width="276" 
height="126" 
/><script>$('#image').reel(
{image:       'f1-reel.jpg',
frames:      35,footage:     6});

</script>

特徴

  • 豊富なオプション
  • 縦・横のマルチスクロールが可能
  • ジャイロスコープ対応

reelはSpriteSpinと同様に、シーケンス(連番)画像とスプライトシート(連番画像を1つにまとめた)画像の双方に対応し、パノラマ表現も可能です。一番の特色だと感じたのは、横方向のスクロールだけでなく縦方向の回転も可能な点です。これにより表示できるアングルが倍増しますが、その分の画像素材を用意するのも大変ですし、ダウンロードする画像容量も増えるので、使い方は慎重に検討したほうがよさそうです。
v1.3の新機能としてジャイロスコープを利用して回転を制御できる機能も追加されたようで、これからの新機能にも期待できそうです。

まとめ

今回は360度ぐるぐる回すためのプラグインを3つご紹介しました。
単純に360度ドラッグ操作でまわすだけなら、軽量なTHREESIXTY SLIDERが良いかなと感じました。どのプラグインを利用するにしても画像素材がメインのコンテンツとなるので、サイズや容量は出来るだけ小さくまとめる必要があります。折角360度コンテンツを用意しても、画像読込に時間が掛かるとユーザはすぐにページから離れてしまうので、気をつけたいところです。

Related Post

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable