猫眼电影：正义联盟英雄集结

2017-11-20 H5案例分享 H5案例分享

案例：正义联盟英雄集结

出品：猫眼电影

亮点：

策划上宣传正义联盟电影 (1)加载完毕后进入一个720°全景场地，背景音乐自动播放。一个模态框提示可以探索屏幕，点击徽章可进行查看英雄详情。(2)点击屏幕都取消模态框。正式进入场地，场地正前方有五个漫威英雄，英雄头顶上有英雄徽章。（3）点击英雄徽章后播放对应英雄视频，视频结束之后以一张长图展示电影画报，长图上包括英雄头像，电影正义联盟的上映时间，演员介绍、英雄介绍等。也可以向下滑动查看更多英雄详情，英雄详情以漫画的风格展示英雄的图标、能力、来历、特点。（4）在屏幕底部固定两个按钮，分别为立即购票和我是超级英雄，点击我是超级英雄，即可上传图片与面具合成超级英雄图片，完成后长按保存，也可以分享到微博。
设计上深色主题，符合正义联盟的电影色彩
技术上 CSS3 的animation实现动画

技术实现： Zepto + gesturer（手势库）

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

正义联盟英雄集结-查阅二维码

完整欣赏此案例大约需要2分40秒

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签