jQuery Panorama Viewer

JavaScript

パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

jQuery Panorama Viewerはパノラマビューを実装することができるjQueryプラグインです。画像をマウスでドラッグすることで横に広がっている画像を見ていくことができます。スマホでも試してみたところちゃんと動作しました。

[ads_center]

jQuery Panorama Viewerの使い方

jQuery Panorama Viewer

jQuery Panorama Viewer by Pete R. | The Pete Design

jQuery本体とプラグインファイルを読み込んだ状態で、以下のように画像をマークアップします。

<div class="panorama">
    <img src="sample.jpg">
    ...
</div>

で、プラグインをセット

$(".panorama").panorama_viewer({
    repeat: false,
    direction: "horizontal",
    animationTime: 700,
    easing: "ease-out",
    overlay: true
});

実際のデモではこんな感じでとても雄大な自然の景色や都会などを一望することができます。

jQuery Panorama Viewer

ダイナミックなパノラマビューを実装したい時に覚えておきたいですね。

関連記事

  1. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  3. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  4. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  5. Justified Gallery
  6. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP