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. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  2. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  3. jQuery liMarquee
  4. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  5. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP