影厅座位预览效果(css3)

泡在网上的日子 / 文 发表于2016-06-02 01:46 次阅读 css3

CinemaSeatPreviewExperiment

查看 demo   下载源码

你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛,电影,搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊,比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享给大家的一个新尝试。

注意:我们使用到的某些技术还是非常实验性质的,不是所有浏览器都支持。这个demo需要浏览器支持transform-style: preserve-3d。

我们的想法是显示一个可以从座次表选择座位的影厅。当选择一个座位,我们将移动到房间的相应位置,让用户可以看到所选位置的真实视野。在页面的中央有一个可以解锁旋转视角的按钮(默认是不能随鼠标旋转视角的),考虑到真实情况下用户会旋转的自己的头,所以这点也是很重要的。

这个demo中用到的预告片来自 The Blender Foundation的动画片Sintel

开始,我们显示一个带预告片信息和选择座位选项的预告屏幕:

CinemaSeatPreviewExperiment_01

然后我们点击select the seats,我们将把视野移到影厅的后面,并显示座次表:

CinemaSeatPreviewExperiment_02

一旦点击了一个座位,视野将移动到座位相应的位置:

CinemaSeatPreviewExperiment_03

屏幕中央的图标可以让我们解锁视野,比如可以让观察者环顾四周。这类似于脑袋的自由扭动,对于模拟真实视野是很重要的。

我们可以在任意点播放预告片,并感受到从那个特定位置屏幕是如何呈现的。

不幸的是,某些版本的IE不支持transform-style: preserve-3d,所以这个demo是不能在这些版本运行的。

在Github上找到这个项目

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

收藏 赞 (7) 踩 (0)
上一篇:使用 SVG Filter实现扭曲的按钮效果
View demo Download source 紧接着Lucas Bebber在 最近的web实验 中对图片和文字制造的逼真热辐射和水波效果,我们想分享一下这类效果在按钮上的灵感。在HTML元素上使用SVG滤镜能让我们有更大的机会实现创造性的点击互动,这正是我们今天所要探索的内容。 主
下一篇:使用SVG滤镜创造Gooey效果
今天我们将演示如何使用SVG Filter在HTML元素上实现沾粘效果(gooey-like effect)。我们首先讲解基础知识,然后再演示几个针对web元素的创造性用例,比如菜单,app, selection,页面导航等。 注意 这种效果只是试验性的,只支持现代浏览器。 我们首先深入