素材牛

电影院在线选座和观影同步观感效果预览

 所属分类:网页特效-输入/选择框,独立部件,动画效果

 浏览:555次  下载:3次  评论:7次  发布时间:2018-05-30
电影院在线选座和观影同步观感效果预览兼容IE9
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:想必大家在网上都买过电影票、机票、车票吧,在购票过程中,你需要选择一个座位。假如你想看《复仇者联盟3》,你在选座位的过程中并不知道你的位置的观影效果,那么本文来告诉你如何做到在选择座位的同时可以看到屏幕效果,让购票者有种虚拟现实的预览,是不是很酷。

这种效果可以应用在电影院购票系统或者演唱会门票购票系统等。我们从座位分布图中选择座位时,我们将移动到电影院中的对应的实际位置中,并允许用户从所选的位置看大屏幕,可以预览播放预告片,看到真实的视图效果,在影片播放时,还可以解锁旋转按钮,模拟观影者倾斜和扭头动作而看到的视图效果。

注意,本例由于使用了一些特殊的web技术,导致某些浏览器不支持,像IE。但是在Chrome和Firefox上效果很棒。您的浏览器必须支持transform-style: preserve-3d。

最初,只显示3D效果的电影院环境,中间是大屏幕,你可以播放预告片。点击“立即选座”即可选座。

实例用到了HTML5,SVG,CSS3动画等诸多web技术,感兴趣的同学可以下载源码研究。

文件目录结构
  • css
    • ┝ component.css
    • ┝ component.css.map
    • ┝ component.scss
    • ┝ demo.css
    • ┝ normalize.css
  • fonts
    • codropsicons
      • ┝ codropsicons.eot
      • ┝ codropsicons.svg
      • ┝ codropsicons.ttf
      • ┝ codropsicons.woff
      • ┝ license.txt
  • img
    • ┝ camera.svg
    • ┝ lookaround.svg
    • ┝ play.svg
    • ┝ seat.svg
    • ┝ seats.svg
  • ┝ index.html
  • js
    • ┝ classie.js
    • ┝ main.js
    • ┝ modernizr-custom.js

讨论这个项目(7)回答他人问题或分享插件使用方法奖励牛币

Lv8 钻石2

    华夏nan
    2018年05月31日 14:32

Lv3 黄金

    淡然笑
    2018年06月01日 18:41

Lv2 白银

    SSS1
    2018年06月02日 11:21

Lv2 白银

    疯狂的追逐
    2018年06月19日 18:03

Lv2 白银

    13452078031
    2018年06月20日 10:43

Lv2 白银

    13452078031
    2018年06月21日 14:41

Lv1 青铜

    来找你玩呢
    2018年06月29日 16:10
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证