ぐるぐる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

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

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import