梅赛德斯-奔驰：放开活！甩开教条，梅赛德斯-奔驰新生代车型邀你活出自我

2017-05-10 H5案例分享 H5案例分享

案例：放开活！甩开教条，梅赛德斯-奔驰新生代车型邀你活出自我

出品：梅赛德斯-奔驰

亮点：

策划上，汽车类，① 点击首屏耳朵图标，出现一个嘴巴，开始循环播放第一条忠告，点击嘴巴让他闭嘴，关闭忠告，然而忠告数却翻倍出现，再次让他闭嘴后，忠告数再次翻倍，依次这样变换几次后，来到视频页；② 而后以激情的、充满活力风采的创意视频鼓励大家放开活！③ 视频结束来到梅赛德斯-奔驰汽车展示页，在这页可详细了解梅赛德斯-奔驰汽车，点击申请试驾，填写个人信息，点击确认提交即可进行预约试驾。
设计上，前半部分，满屏都是嘴，还有好多嘴巴在同时说话，充满压抑嘈杂；后半部分放开活，充满激情活力。
技术上，① 嘴巴播放页面是采用Canvas +Pixi.js（HTML5 2D渲染引擎）来实现的；② 音频主要是用Howler.js（JavaScript音频库）来控制的；③ 放开活视频是用带有x5-video-player-fullscreen,x5-video-player-type,x5-video-orientation等属性的Video来实现的；④ 尾屏左右滑动看汽车的详情介绍采用的是JS滑屏组件Swiper。

技术实现： jQuery + Swiper + Pixi.js（HTML5 2D渲染引擎）

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

识别图中二维码

放开活！甩开教条，梅赛德斯-奔驰新生代车型邀你活出自我-查阅二维码

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

标签