skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」

ECサイトなどで商品を360度のアングルで見せることがあるかと思います。
jQueryプラグインのRollerblade.jsを使用すると、360度ビューの実現が簡単にできます。

sponsors

使用方法
Rollerblade.jsからファイル一式をダウンロード。
また、見せたい角度すべての画像を用意します。
※これが一番面倒だったりしますね・・・
次に最初に見せたい画像をclass名でくくって記述します。
<div class="class名">
<amp-img src="一枚目の画像">
</div>

最後にjsを記述していきます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="rollerblade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var motions = [
//表示させたい画像パスを記述
'画像パス1',
'画像パス2',
'画像パス3',
'画像パス4',
'画像パス5'
];

$(".class名").rollerblade({
imageArray: motions,
sensitivity: 20,//数字を小さくするとマウス移動に対して回転の動きが早くなります
drag: false//ドラッグさせるかどうか
})
});
</script>

写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」サンプル

sponsors

「写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」」をシェアする

記事作成:
記事URL:

TOP > > > 写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」

前の記事:
次の記事:ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more