JavaScript による パノラマスクロール 安倍
ネットから入手したパノラマスクロール例をいくつか紹介します。
複数の写真からパノラマ写真を合成するには、Canon の PhotoStitch が便利です。
試作 引用/解説 備考1-1 360度循環型(1) 引用元と解説1
解説2このソースコード内の画像ファイル ***.jpg を入替え、外部ファイル 360sc.js を置けば他の循環型スクロール映像に応用できる。
FireFox Ver.3.6で動作せず。1-2 360度循環型(2) 引用元 上下分割のフレーム方式。
ソースコードは基本的に下記 3-2片道型 (2) と同じだが、同一画像ファイルを2つ並べることで循環型となる。
1-3 360度循環型(3)
狭い窓で自動
+マウスでSTOPjQuery
USA 例スクロール窓幅を自由に指定できるのでレイアウトの自由度が高い。
USAのサイトからダウンロードしたほうが例がたくさんあって分りよい。2 往復型
往き、戻り、ともにゆっくりソースコード内の画像ファイル ***.jpg を入替え、外部ファイル 180sc.js を置けば他のスクロール映像に応用できる。
広範囲の画面幅に対応でき、狭い画面で画面が切れたり、広画面で待ち時間が長すぎたりすることはない。
FireFox Ver.3.6で動作せず。.3-1 片道型 (1)
右端でしばらく停止して、
素早く戻る引用元 ソースコード内の画像ファイル ***.jpg を入替えるだけで他のスクロール映像に応用できる。外部ファイルは不要。
ただし、縦方向の手動スクロールができないので小画面PCでの閲覧を考慮して縦幅を狭くする配慮が必要。
狭い画面幅では右端が欠落したり、広画面で右端での待ち時間が長くなるなど、画面幅への考慮が必要。3-2 片道型 (2)
右端でしばらく停止して、
瞬時に戻る引用元 上下分割のフレーム方式。複数枚のアルバムとしても使える。 Intenet Explorer から「全てを保存」した後に画像交換すれば他に応用できる。 ただし、上フレームは3-1と同じく縦方向の手動スクロールができないので小画面PCでの閲覧を考慮して縦幅を狭くする配慮が必要。
注釈※)参照4 マウスで スクロール
広角パノラマ
360度パノラマ
左の広角パノラマ、360度パノラマ、両者同一JavaScript使用。両者の違いはスクロール幅。
ブログなどで小さな窓でスクロールさせる場合に使えるが、多数の外部ファイルが必要で少々難しい。
画像は外部cssファイル(photonav.css)で指定する。 スクロール幅(画像幅)は本文末尾JavaScriptで調整できる。5 狭い窓 で
往復スクロール2と同じ フレームを使って、上の 2.往復型の表示窓を狭くした。
FireFox Ver.3.6で動作せず。上記の他、ネット上に数多くある例は、ブラウザから「全て保存」してパソコンに取り込んでも、 「全て」が保存できない場合があります。
例えば、本文に挿入されたJavaScriptは取り込めますが、外部 ファイルのJavaScriptや、Java Applet がある場合は取り込めなかったり取り込めても本文からの参照ができなくて動作しなかったりします。
その場合、ソースをチェックして外部ファイルの参照先を調べてパスを再構築したり、
あるいは、ネット検索で外部ファイルを入手します。 上記360sc.js、180sc.js はネットから入手できます。また、IntenetExplorer で保存するとフォルダ名に「・(ドット)」が入る。 Yahooなど、サーバーによってはフォルダ名、ファイル名に「・」は使えないのでFTP時にエラーとなる。
この「・」を全て「_ 」などの他の記号に変更する必要がある。
スクロール解説
http://view.adam.ne.jp/setoy/pic/360demo/index1.htmlhttp://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.htmhttp://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.htmlhttp://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)などを変更できる。
複数の写真をつないで横長のパノラマにするぐソフト:
Canon PhotoStitch
https://www.updatestar.com/ja/topic/canon%20photostitch%20windows%2010
Microsoft Research Image Composite Editor (ICE)
http://www.mars.dti.ne.jp/koitiro/shashin/ms-ice_usage.htmlhttp://d.hatena.ne.jp/TERRAZI/20080925/p1