JavaScript による パノラマスクロール  安倍

ネットから入手したパノラマスクロール例をいくつか紹介します。 

 
試作
引用/解説
備考
-1 360度循環型(1) 引用元と解説1    解説2 このソースコード内の画像ファイル ***.jpg を入替え、外部ファイル 360sc.js を置けば他の循環型スクロール映像に応用できる。
FireFox Ver.3.6で動作せず。
-2 360度循環型(2) 引用元 上下分割のフレーム方式。
ソースコードは基本的に下記 3-2片道型 (2) と同じだが、同一画像ファイルを2つ並べることで循環型となる。
-3 360度循環型(3)
狭い窓で自動
 +マウスでSTOP
jQuery

引用元
   USA
スクロール窓幅を自由に指定できるのでレイアウトの自由度が高い。
USAのサイトからダウンロードしたほうが例がたくさんあって分りよい。
-4 360度循環型(4) HomepageBuilder 付属
HotMedia クリエーター
JavaScript でなく、Java Applet を使用。端末にJava Appletがインストールされている必要あり。
スクロール窓幅を自由に指定できるのでレイアウトの自由度が高い。
       
往復型
往き、戻り、ともにゆっくり
引用元 ソースコード内の画像ファイル ***.jpg を入替え、外部ファイル 180sc.js を置けば他のスクロール映像に応用できる。
広範囲の画面幅に対応でき、狭い画面で画面が切れたり、広画面で待ち時間が長すぎたりすることはない。
FireFox Ver.3.6で動作せず。.
-1 片道型 (1)
右端でしばらく停止して、
素早く戻る
引用元   そのUSA元 ソースコード内の画像ファイル ***.jpg を入替えるだけで他のスクロール映像に応用できる。外部ファイルは不要。
ただし、縦方向の手動スクロールができないので小画面PCでの閲覧を考慮して縦幅を狭くする配慮が必要。
狭い画面幅では右端が欠落したり、広画面で右端での待ち時間が長くなるなど、画面幅への考慮が必要。
-2 片道型 (2)
右端でしばらく停止して、
瞬時に戻る 
引用元 上下分割のフレーム方式。複数枚のアルバムとしても使える。 Intenet Explorer から「全てを保存」した後に画像交換すれば他に応用できる。 ただし、上フレームは3-1と同じく縦方向の手動スクロールができないので小画面PCでの閲覧を考慮して縦幅を狭くする配慮が必要。
注釈※)参照
マウスで スクロール
    広角パノラマ
    360度パノラマ
     + ソラカちゃん)
引用元と解説   ネット例  
左の広角パノラマ、360度パノラマ、両者同一JavaScript使用。両者の違いはスクロール幅。
ブログなどで小さな窓でスクロールさせる場合に使えるが、多数の外部ファイルが必要で少々難しい。
画像は外部cssファイル(photonav.css)で指定する。 スクロール幅(画像幅)は本文末尾JavaScriptで調整できる。
5 狭い窓
往復スクロール
2と同じ フレームを使って、上の 2.往復型の表示窓を狭くした。
FireFox Ver.3.6で動作せず。
6 手動スクロール 引用元 shudoo.css を使い、本文に<div>~</div>を入れる。 自動スクロールとの組合せはできない。 表示が欠け
フリーサーバーでは広告との干渉あり。      
7 縦スクロール  引用元 メインフレームはJava Applet、 サブフレームの画像操作にJavaScript使用。
サーバーやブラウザの種類、Version によって動作が不安定で画面がチラついたり各画像間に空白ができたりする。
 

上記の他、ネット上に数多くある例は、ブラウザから「全て保存」してパソコンに取り込んでも、 「全て」が保存できない場合があります。
例えば、本文に挿入されたJavaScriptは取り込めますが、外部 ファイルのJavaScriptや、Java Applet がある場合は取り込めなかったり取り込めても本文からの参照ができなくて動作しなかったりします。
その場合、ソースをチェックして外部ファイルの参照先を調べてパスを再構築したり、
あるいは、ネット検索で外部ファイルを入手します。 上記360sc.js、180sc.js はネットから入手できます。

また、IntenetExplorer で保存するとフォルダ名に「・(ドット)」が入る。 Yahooなど、サーバーによってはフォルダ名、ファイル名に「・」は使えないのでFTP時にエラーとなる。
この「・」を全て「_ 」などの他の記号に変更する必要がある。


スクロール解説

http://view.adam.ne.jp/setoy/pic/360demo/index1.html
http://view.adam.ne.jp/setoy/pic/360demo/index2.html
  
各種スクロールの例

360度循環型
http://qpon.quu.cc/java/scroll/scroll_b.htm


http://qpon.quu.cc/java/nyumon/nyumon27.htm

http://www.ne.jp/asahi/akahori/yama/slide.can01.htm

http://www.ne.jp/asahi/akahori/yama/pa.scroll.top.htm

往復-片道型
http://www.k5.dion.ne.jp/~kawak/ps-miyazaki-1.html

http://tenplus.fc2web.com/slide_scroll/tyoukai360.htm

http://www2a.biglobe.ne.jp/~qpon/   (右窓内にいろんな応用例がある。)  

注釈※)下記パノラマ集の スイスアルプス(5)より引用
  http://www.ne.jp/asahi/akahori/yama/pa.scroll.top.htm
ブラウザ から「webページ保存(全て)」で取り込みした後、画像交換できる。取り込みしたファイルは上下2つのフレームとなる。
上フレームで画像の交換、追加ができる。
下フレームでスクロール全体幅(en)や、スクロール初期速度(spd)などを変更できる。


複数の写真をつないで横長のパノラマにするぐソフト:

Microsoft Research Image Composite Editor (ICE)


http://www.mars.dti.ne.jp/koitiro/shashin/ms-ice_usage.html

http://d.hatena.ne.jp/TERRAZI/20080925/p1


ホームページ作成体験

 

inserted by FC2 system