360手机:王凯给你发来一个邀请

2016-06-28 H5案例分享 H5案例分享
360手机:王凯给你发来一个邀请

案例:王凯给你发来一个邀请

出品:360手机

亮点:

  1. 策划上,小游戏类,① 翻转手机前,看到的是朝霞满天,灯光璀璨的城市,其中的三种高楼由其引人注目;② 翻转手机后,灯火升起,出现王凯逆光而行的背影,这点利用了明星效应,继而出现一段走心感人的文字,鼓励大家坚持梦想,为之奋斗,也暗含360手机为梦想所做的努力和坚持不懈;其中的三座高楼远看是1.14,和页面中央的360手机发布会时间、地点相呼应;③ 点击“查看地图”,出现发布会地点简要平面地图,想看详细地图,可点击“地图导航”即跳转到发布会所在地北京D·PARK 751新罐的腾讯地图页

  2. 设计上,采用黑夜、灯光、朝霞、城市、背影作为主要元素,① 手机翻转前,在视觉上营造了一种黎明在即,阳光突破黑暗,破晓而出的场景,也象征了360手机经过长时间的努力,即将在发布会上与大家见面的迫不及待;② 手机翻转后,逆光而行的背影、上方1.14标志的高楼大厦,升起的灯火都在视觉上给人以极大的冲击力

  3. 技术上,翻转手机采用的是HTML5的重力感应,上下小幅度移动的大楼,灯火等元素的动画主要采用的是CSS3的animation

  4. 体验上,视觉上很震撼,翻转手机产生不同的效果也不少见,但是直接翻转手机后,倒着看的H5案例,小编暂时就见到了这一个,玩到最后发现实际上是360手机新品发布会,商品和小游戏相结合,总体来说还是蛮有新意的~



技术实现: Zepto


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

识别图中二维码

王凯给你发来一个邀请-查阅二维码




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

标签

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

相关推荐:

360手机卫士:将爱,放在手指心间

银汉游戏:黑科技?!凡人也能成大侠

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~