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. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  2. cascadingDivs
  3. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  4. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  5. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  6. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP