この記事で紹介するすばらしいjQueryパノラマ画像表示プラグインを取り込めば、Webサイトの画像の360度ビューを訪問者に堪能してもらえます。バーチャルツアー、パノラマビューワー/スクロール、画像のキューブ、エンドレスな写真スライダーなどが使えます。体感してみてください!
次のような関連記事もあります。
1. Threesixtyslider
ThreesixtysliderはjQueryを使った360度画像作成プラグインです。幸い、主要なブラウザー(IE6以上を含む)すべてが対応しており、レスポンシブ対応もバッチリです!
SpriteSpinライブラリーと同様、画像を完全に(360度)回転できます。特に360度ビューがユーザーにとってメリットとなる、eコマースWebサイトでの画像表示に効果的です。
設定としてはheightやwidthからplaySpeedやdisableSpinまで、満足のいく顧客体験を演出できるオプションが提供されています。
2. Paver
Paverは、パノラマ画像やワイドスクリーン画像をより良くするために作成されました。Paverの作者Terry MunはiPhone 4からiPhone 6にアップグレードして、パノラマ画像をキャプチャーするiPhoneの性能に驚嘆しました。
パノラマ画像に夢中になる一方、MunはiPhoneで表示される画像がゆがんで見えることに不満を感じるようになりました。見栄えがしないなら、パノラマ写真のどこがすごいと言うのでしょう?
画像を確実に正しく表示するため、Paverではデバイス間で互換性のあるアスペクト比の実装に焦点を当て、ワイドスクリーン画像とパノラマ画像が適正にレンダリングされるようにしています。
実際Paverの技術は素晴らしいので、ニュースサイトThe Vergeは、アメリカのファーストレディ ミシェル・オバマ(Michele Obama)氏のワイドスクリーン画像を彼女の主要なソーシャルメディア関連記事で表示する際、このプラグインを採用しました。
3. jQuery Spherical Panorama Viewer
jQuery Spherical Panorama Viewは、この記事で紹介する2つのOpen Studio Labsライブラリーのうちの最初のものです。画像の完全な360度ビューを表示できるので、レストランやマンションなどの見栄えを引き立てるのにとても適しています。
使い方はとてもシンプルで、JavaScriptを書く必要さえありません。効果を適用する画像にpanoramaクラスを追加するだけでOKです。大切な点として.panoramaクラスはこのjQuery Spherical Panorama View専用であることに注意してください。
カスタマイズは、必ずimgやpanoramaImageなど新規のクラス名を使う必要があります。生成されたビューの数だけでなく、画像のビューカラムのカラム数(各行のビュー数)も指定できます。
4. jQuery Virtual Tour
jQuery Virtual Tourは上で紹介したjQuery Spherical Panorama Viewの拡張機能を提供しています。つまり、jQuery Virtual Tourによってさらに進んだインタラクティブなバーチャルツアーが作成できるのです。実現するためには、HTMLの<map>、<area>タグを使ってページにインタラクティブに座標を追加します。これらのHTML要素によって、JavaScriptが無効なブラウザーにもツアーをレンダリングできます!
実行例を見ると、Googleマップのストリートビューと同様の効果を演出できることが分かります。写真の特定のポイントをクリックするとそのポイントの座標に移動し、クリックしたまさにその位置からビューを表示できるのです。
jQuery Virtual Tour Webサイト / デモ
5. SpriteSpin
SpriteSpinは、画像のディレクトリや作成済みの「sprite-sheet」からアニメーションを作成します。アニメーションが作成されると、flip book(パラパラ絵本)のようにフレームが次々と最後までループします。
SpriteSpinは「360 slider」と同様、あらゆる製品の360度ビューを目指していますが、さらに一歩進めて、ユーザーが反応とアニメーション表示をカスタマイズできるいくつかの追加機能があります。
6. Pano
Panoはパノラマ画像作成用の信頼できる分かりやすいライブラリーです。Panoは圧縮されない状態で250行以下のコードベースを提供しているので、埋め込み画像用の極めて軽量なリソースとなっています。コードの量が少ない分機能も少なく、Panoの機能はimg、interval、speedの3つに限られていますが、驚くにはあたりません。
7. Panorama 360° jQuery
Panorama 360° jQueryプラグインは別のプラグインのフォークとして開発されました。「Panorama 360°」ライブラリーの作者はスクロール効果をもっと良くしたいと考え、画像のスライドが次々とスムーズに動く機能に焦点を当ててこのライブラリーを作成しました。
Webページの「見せ場」だけでなく、下で紹介しているデモのように全体がパノラマだけで構成されているページも簡単に作成できます。
Panorama 360° jQueryのWebサイト / デモ
8. jQuery Image Cube
jQuery image cubeは、この記事で紹介するほかのプラグインと一味違っています。名前から想像できるとおり、このプラグインを使って画像をキューブのような形で表示できます。
さらに良いことに、最小限のコードで簡単にカスタマイズできる十数個のオプションがあります。その中のbeforeRotateとafterRotateはどちらもコールバック関数で、開発者に提供しているコントロール例も含まれています。さらにユーザーはキューブの方向、スピード、イージングを変更でき、たくさんのオプションを使って画像キューブの表示方法をとても都合良くカスタマイズできます。
9. Cyclotron
Cyclotronはパノラマ画像を端から端まで回転表示できることにちなんで名づけられました。Cyclotronを使ってマウスをある方向にクリック&ドラッグすると、その方向に回転する画像が見られます。マウスや指でドラッグするスピードが回転のスピードとなり、最初のドラッグ後、画像は同じスピードを保ちながら最後まで連続して回転します。
Cyclotronには回転の反応を設定するdampingFactorやautorotationなどのオプションが搭載されています。詳しくはこちらを参考にしてください。
10. jQuery Simple Panorama Viewer
Simple Panorama ViewerはCyclotronと同様、表示画像をはじめから終わりまで動かせますが、画像が回転し続けるようにはなっていません。
代わりに、ビューワーでプラグインのスクロール速度に従って左右(または上下)にスクロールできます。デフォルトでは700msの速さで左右両方向にスクロールするease-inアニメーションを実行します。ユーザーはanimationTimeとeasingオプションにカスタム値を渡して設定を変更できます。このライブラリーのオプションについて、詳細はこちらを参照してください。
jQuery Simple Panorama ViewerのGitHub / デモ
※この記事は、パノラマ画像プラグインの最新状況を反映して2016年9月1日に更新されました。
(原文:10 jQuery Panorama Image Display Plugins)
[翻訳:新岡祐佳子/編集:Livit]