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

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

jQuery Flip-Quote文章内で引用したい部分をフリップさせるjQueryプラグイン「jQuery Flip-Quote」前のページ

フラットデザイン&ロングシャドウな19のソーシャルメディアのアイコン次のページフラットデザイン&ロングシャドウのアイコン

関連記事

  1. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  2. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  3. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  4. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  5. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP