热门标签 | HotTags
当前位置:  开发笔记 > 开发工具 > 正文

影厅座位预览效果(css3)

影厅座位预览效果(css3)
查看 demo 下载源码

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

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

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

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

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

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

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

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

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

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

在Github上找到这个项目 。

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

推荐阅读
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • 历经三十年的开发,Mathematica 已成为技术计算领域的标杆,为全球的技术创新者、教育工作者、学生及其他用户提供了一个领先的计算平台。最新版本 Mathematica 12.3.1 增加了多项核心语言、数学计算、可视化和图形处理的新功能。 ... [详细]
  • #print(34or4 ... [详细]
  • gitlab配置免密拉取推送
    目录一.简介二.配置一.简介gitlab默认提供HTTPSSH两种请求方式下载代码测试用的gitlab账号账号:abc密码:123456二.配置1.生成秘钥,一路回车即可cd~ss ... [详细]
  • 本文详细介绍了 Java 中 org.geotools.data.shapefile.ShapefileDataStore 类的 getCurrentTypeName() 方法,并提供了多个代码示例,帮助开发者更好地理解和使用该方法。 ... [详细]
  • 在高并发需求的C++项目中,我们最初选择了JsonCpp进行JSON解析和序列化。然而,在处理大数据量时,JsonCpp频繁抛出异常,尤其是在多线程环境下问题更为突出。通过分析发现,旧版本的JsonCpp存在多线程安全性和性能瓶颈。经过评估,我们最终选择了RapidJSON作为替代方案,并实现了显著的性能提升。 ... [详细]
  • 本文将探讨2015年RCTF竞赛中的一道PWN题目——shaxian,重点分析其利用Fastbin和堆溢出的技巧。通过详细解析代码流程和漏洞利用过程,帮助读者理解此类题目的破解方法。 ... [详细]
  • 离线安装Grafana Cloudera Manager插件并监控CDH集群
    本文详细介绍如何离线安装Cloudera Manager (CM) 插件,并通过Grafana监控CDH集群的健康状况和资源使用情况。该插件利用CM提供的API接口进行数据获取和展示。 ... [详细]
  • yikesnews第11期:微软Office两个0day和一个提权0day
    点击阅读原文可点击链接根据法国大选被黑客干扰,发送了带漏洞的文档Trumps_Attack_on_Syria_English.docx而此漏洞与ESET&FireEy ... [详细]
  • 使用Git在Gitee上克隆企业仓库的步骤
    本文介绍了如何在Gitee平台上通过Git克隆企业仓库。首先,你需要获得仓库创建者的授权,并确保你具备访问权限。接下来,在执行克隆操作时,系统会要求你输入用户名和密码以完成身份验证。 ... [详细]
  • Python 工具推荐 | PyHubWeekly 第二十一期:提升命令行体验的五大工具
    本期 PyHubWeekly 为大家精选了 GitHub 上五个优秀的 Python 工具,涵盖金融数据可视化、终端美化、国际化支持、图像增强和远程 Shell 环境配置。欢迎关注并参与项目。 ... [详细]
  • 版本控制工具——Git常用操作(下)
    本文由云+社区发表作者:工程师小熊摘要:上一集我们一起入门学习了git的基本概念和git常用的操作,包括提交和同步代码、使用分支、出现代码冲突的解决办法、紧急保存现场和恢复 ... [详细]
  • 本文介绍如何通过CMD命令筛选特定类型的文件路径,并将其导出为TXT文件,同时提供进一步处理这些文件的方法,如批量重命名或合并为PDF。 ... [详细]
  • 本章详细介绍SP框架中的数据操作方法,包括数据查找、记录查询、新增、删除、更新、计数及字段增减等核心功能。通过具体示例和详细解析,帮助开发者更好地理解和使用这些方法。 ... [详细]
author-avatar
zzzzzzzzssss
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有