[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
公開日:
:
最終更新日:2014/09/05
jQuery, Web制作 javascript, jQuery
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' ]}); })
どちらでも問題ありませんが、配列を用意しておくほうが、メンテナンスがラクかもしれません。
まとめ
今回は、多数の画像を用意しなければならないので、サンプルを作りませんでしたが、商品発表のページや面白いギミックを盛り込んだページに向いていると思います。
こちらのサンプルサイトで動きを確認することができます。
二つ目の画像ではマウスの動きに合わせて画像が切り替わっています。
こういうのはあまり見かけないので、うまく使えばインパクトのあるサイトになりますね。
ad
関連記事
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ