劇場座席プレビュー効果 (css3)_html/css_WEB-ITnose

デモのダウンロード ソース コードを表示

購入時に座席の選択が必要なチケット予約システムについてはご存知かもしれません。これは通常、ゲーム、映画、試合、コンサートのチケットを販売するときに必要です。選択した位置の視点からステージやスクリーンをプレビューできるなど、座席のプレビュー効果があればどんなに素晴らしいでしょう。この質問は、今日皆さんと共有する新しい試みにつながります。

注: 私たちが使用しているテクノロジーの中には、まだ実験段階にあるものもあって、すべてのブラウザーでサポートされているわけではありません。このデモでは、ブラウザがtransform-style:preserve-3dをサポートしている必要があります。

座席表から座席を選択できる劇場を表示するというアイデアです。座席が選択されると、部屋内の対応する場所に移動し、ユーザーは選択した場所を実際に見ることができます。ページの中央には回転視点のロックを解除できるボタンがあります (デフォルトでは視点はマウスで回転できません)。実際の状況でユーザーが頭を回転させることを考慮すると、これも非常に重要です。

このデモで使用されている予告編は、Blender Foundation のアニメーション映画 Sintel のものです。

まず、トレーラー情報と座席を選択するオプションを含むトレーラー画面を表示します。

次に、座席の選択をクリックすると、ビューが移動します。

座席をクリックすると、ビューはその座席の対応する位置に移動します:

画面中央のアイコンを使用するとビューのロックを解除でき、観察者が周囲を見回すことができるようになります。これは頭​​の自由なひねりに似ており、実際の視覚をシミュレートするために重要です。

いつでもトレーラーを再生して、その特定の場所から画面がどのように見えるかを知ることができます。

残念ながら、IE の一部のバージョンは transform-style:preserve-3d をサポートしていないため、このデモはこれらのバージョンでは実行できません。

Github でこのプロジェクトを見つけてください。

原文: http://tympanus.net/codrops/2016/01/12/cinema-seat-preview-experiment/ 。