[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン

rollerblade-js

Rollerbladeを使えば、Webサイトに360°回転させてプロダクトや画像を見る事が出来るすばらしい体験ができるようになります。

導入方法

まずはjQueryとRollerbladeを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/rollerblade/rollerblade.js"></script>

デモサイトでは最後に読み込んでいます。

そして、CSSの読み込みです。

<link rel="stylesheet" href="js/rollerblade/rollerblade.css">

これで準備は完了です。

あとは実行文だけですが、画像をたくさん使うため方法が2種類あります。

まずは、先に配列に画像を入れておいて読み込むタイプ

$(document).ready(function(){
    var arrayOfImages = [
      'path/to/image/1.jpg',
      'path/to/image/2.jpg',
      'path/to/image/3.jpg',
      'path/to/image/4.jpg',
      'and/so/on.jpg'
    ]

    $("#target").rollerblade({imageArray:arrayOfImages});
})

そして、ダイレクトに読み込むタイプ

$(document).ready(function(){
    $("#target").rollerblade({imageArray:[
      'path/to/image/1.jpg',
      'path/to/image/2.jpg',
      'path/to/image/3.jpg',
      'path/to/image/4.jpg',
      'and/so/on.jpg'
    ]});
})

どちらでも問題ありませんが、配列を用意しておくほうが、メンテナンスがラクかもしれません。

まとめ

今回は、多数の画像を用意しなければならないので、サンプルを作りませんでしたが、商品発表のページや面白いギミックを盛り込んだページに向いていると思います。

サンプルサイト

こちらのサンプルサイトで動きを確認することができます。
二つ目の画像ではマウスの動きに合わせて画像が切り替わっています。
こういうのはあまり見かけないので、うまく使えばインパクトのあるサイトになりますね。