まずはここから使用するパノラマ写真の1例をご覧下さい。
パノラマ写真の縦サイズは、前回採用した500pxで、横幅は特に指定していません。
前回の勉強会で作成したパノラマ写真は10:1位い横長の写真ですが、今回はその横長写真をそのまま使用します。パノラマ写真の左右が繋がっていればエンドレスのパノラマ写真を表示させることができます。
今回のパノラマ写真表示は下図の様な表示形式で画面を左方向にスクロール表示しますが、スピード変更や停止はできず、コメント入力欄もありません。
このパンラマ写真表示ツールは、『9ineBB』という会社のHPからダウンロードできますが、不必要な物もがいっぱい付いている。タイトルや戻るボタンを追加した改良版の圧縮ファイルを作りましたのでここからダウンロードして下さい。
解凍するとWidePanoというフォルダーが作られ、その中のmain.htmlをダブルクリックで起動すると、パノラマ画面が開き、パノラマ写真が左方向にスクロールします。
フォルダー全体を皆さんのMy-HPに入れて下さい。
ホームページビルダーでmain.htmlを開きます。
次にHTMLソースに切り替えると、下記表示になります。一周を表示する時間や写真ファイル名を貴方のデータに書き換えて下さい。ソースの他の場所を見ましたが、他には変更できる項目は無いようです。
背景色についてはblackとなっていたが、英語表記だけでなくカラーコード(#〇〇〇〇〇〇)でも使用できることを確認し、変更した。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Panoramic (pure CSS) - CodePen</title>
<style>
<!--
html, body{
overflow: hidden;
margin: 0;
height: 100%;
}
body{
perspective: 40em;
background: black; 背景色⇒カラーコード(#ccffff)に変えた
}
.roller {
transform-style: preserve-3d;
animation: rot 20s linear infinite; 1周を表示するのに要する時間
}
.roller, .roller *{
position: absolute;
top: 50%;
left: 50%;
}
.slice{
margin: -50vh -4.92457vw;
width: 9.84914vw;
height: 100vh;
backface-visibility: hidden;
background: url(panorama.jpg); パノラマ写真のファイル名
background-size: 3200% 100%;
}
：
：
途中省略
：
：
<p align="center"><font COLOR="#0000cc" SIZE="+2">オーストラリア西海岸のカナルロック</font>
<a href="../index.html" target="_top"><img
src="modoru.jpg" width="79" height="23" border="0"></a></p> タイトルと戻るボタンを今回追加した
</body>
</html>
<!-- https://9-bb.com/360度のパノラマ画像をスクリーンに写しだして表/ -->
|
改良版の表示
|
ブラウザー表示させて、問題が無ければリンクを貼り動作確認の後、ftpで皆さんのサーバーに転送して下さい。
ダウンロードしたファイルのスクロール結果例はここをクリックすると表示されます。
|
Qponさんのパノラマ表示ツールは、エラーがあり表示できませんでしたが、修正すると共に、スライド表示を止めるためのエッグ君の表示や動作も削除したサンプルをここにリンクしました。
上記を右クリックして名前を付けてリンク先を保管とすればダウンロードできます。
|
| 第12回ホームページ勉強会については、今の処新規参加申込者がいません。引き続き第11回ホームページ勉強会として開催します |
