一加手机2的宣传H5案例

2015-11-24 H5案例分享 H5案例分享

案例:一加手机2

出品:一加手机

亮点:

  1. 策划上,三道问题,通过不同的选择,产生四种不同的答案。最后,在答案底部,按钮长按,会显示不同的动画,最后出现四种(砂岩黑版、黑杏版、竹质版、凯芙拉版)不同版本的一加手机2

  2. 视觉上,涂鸦式画风。万能灰为主色调,搭配紫色+红色

  3. 技术上,第一屏中的小动画,采用CSS3的animation;第五屏,答案屏中的动画,采用JS切换整体背景图片来实现动画




技术实现: canvas + Zepto


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

识别图中二维码







关注微信号:h5-share,获取更多牛逼H5案例分享!



微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~