梅赛德斯-奔驰:放开活!甩开教条,梅赛德斯-奔驰新生代车型邀你活出自我

2017-05-10 H5案例分享 H5案例分享
梅赛德斯-奔驰:放开活!甩开教条,梅赛德斯-奔驰新生代车型邀你活出自我

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

出品:梅赛德斯-奔驰

亮点:

  1. 策划上,汽车类,① 点击首屏耳朵图标,出现一个嘴巴,开始循环播放第一条忠告,点击嘴巴让他闭嘴,关闭忠告,然而忠告数却翻倍出现,再次让他闭嘴后,忠告数再次翻倍,依次这样变换几次后,来到视频页;② 而后以激情的、充满活力风采的创意视频鼓励大家放开活!③ 视频结束来到梅赛德斯-奔驰汽车展示页,在这页可详细了解梅赛德斯-奔驰汽车,点击申请试驾,填写个人信息,点击确认提交即可进行预约试驾。
  2. 设计上,前半部分,满屏都是嘴,还有好多嘴巴在同时说话,充满压抑嘈杂;后半部分放开活,充满激情活力。
  3. 技术上,① 嘴巴播放页面是采用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案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

梅赛德斯奔驰:AMG非凡驾驭50年

北京奔驰:成就人生主角

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~