Panoramix Image

JavaScript

左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

Panoramix Imageは、左右に移動できるパノラマ画像を表示させることができます。jQueryが使われているとのこと。ダイナミックで広大な風景写真などを、パノラマ機能を用いて快適に見せたいという人にはピッタリですね。

Panoramix Image

デモ

デモでは、パノラマ画像の左右に矢印アイコンが設置されていて、ここにマウスオーバーすると左右に移動させることができます。そのほか、ドラッグでも左右に移動可能です。

広大な風景写真などをパノラマ機能でじっくり楽しむことができるのは、臨場感があってとても素敵ですね。

また、マウスオーバーによる左右移動のスピードはオプションから変更することもできます。デモではspeedの値が150に設定されています。ちなみに、デフォルトの値は50とのこと。

ほかにも、intervalというオプションやmoveLeft(interval, speed)、moveRight(interval, speed)、stopMoving()といったAPIも用意されています。

実装方法に関しても、とてもシンプルでわかりやすく記述できるのがいいですね。

というわけで、ダイナミックなパノラマ画像を実装したい人は、ぜひ「Panoramix Image」を取り入れてみてはいかがでしょうか?

Panoramix Image

Bootstrap Carousel Touch Slider with Text Animation美しいテキストアニメーションによるスライダー実装「Bootstrap Carousel Touch Slider with Text Animation」前のページ

フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」次のページFolder Preview Ideas

関連記事

  1. infiniteSlider2.js
  2. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  3. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  4. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  5. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  6. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP