CSSだけで観覧車

前回、CSSによる観覧車を作りました。

地球が太陽の周りを公転しながら自転する如く、観覧車のゴンドラは１公転する間に１自転し、常に重力方向に姿勢を保ち続ける仕組みを理解しました。

今回は将来、Youtube Live配信を利用して100ｍにも及ぶ高低差をものともせず勇躍するゴンドラから生中継をめざすべく格段と難易度を上げた観覧車をお届けします。

生中継に道を拓く

生中継するにはYoutube動画配信で可能です。いきなり動画配信はハードルが高いです。まずは連続した静止画像、次に収録した動画、最後に生中継という順序が考えられます。

今回は、連続した静止画像をつなぎ合わせ、JavaScriptを含めた技術で観覧車を駆動します。

WiFiは神社仏閣においてもサポートされることが多くなっています。今やWiFiを使えば地球の裏側にいる友人や家族に、通信料金を心配することなく大観覧車の映像を楽しんでもらうことも可能です。これまでは音声が置き去りにされていました。音声もぜひ取り上げてみたいものです。

音声を含めた動画は自動で再生できなくなりました。このこともあり、このたびは開始ボタンを設けました。また、再実行できるようにリロード機能を付加してあります。

ニュースによればシースルーゴンドラ席が流行のようです。

また、高級料理にワインを提供するサービスもあります。

これらを考慮に入れてJavaScriptによる大観覧車にも、ゴンドラ座席に落ち着くとほのかな灯りがともり室内からの眺望が楽しめます。シースルー特殊機能により外界からは遮蔽された夢の空間が実現します。

Startボタンをクリックして観覧が始まります。観覧車が１回転すると巡行は終了します。Rerunボタンの押下でリロードされ再実行が可能になります。

様々なワザが詰まった4割ほどのJavaScriptから成る98行のHTMLソースコードです。CTRL/Uでソースコードを見ることができます。お楽しみください。

他人の嗜好、好み、たしなみに論評は差し控えなければなりませんが、上記のような完全シースルーは大胆です。思い切って乗用車のガラスのように外から内は見えないが内から外は完全に見える方式にしたら観光客が倍増するのではないだろうか。