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

公開日: : 最終更新日:2014/09/05 jQuery, Web制作 ,

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] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

[CSS] 複数のbackground-imageの設定方法

マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて

記事を読む

[Dreamweaver] コーディングを早くする5つの方法

コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑