[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
公開日:
:
最終更新日:2014/09/05
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
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
関連記事
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ