360手机:王凯给你发来一个邀请
案例:王凯给你发来一个邀请
出品:360手机
亮点:
-
策划上,小游戏类,① 翻转手机前,看到的是朝霞满天,灯光璀璨的城市,其中的三种高楼由其引人注目;② 翻转手机后,灯火升起,出现王凯逆光而行的背影,这点利用了明星效应,继而出现一段走心感人的文字,鼓励大家坚持梦想,为之奋斗,也暗含360手机为梦想所做的努力和坚持不懈;其中的三座高楼远看是1.14,和页面中央的360手机发布会时间、地点相呼应;③ 点击“查看地图”,出现发布会地点简要平面地图,想看详细地图,可点击“地图导航”即跳转到发布会所在地北京D·PARK 751新罐的腾讯地图页
-
设计上,采用黑夜、灯光、朝霞、城市、背影作为主要元素,① 手机翻转前,在视觉上营造了一种黎明在即,阳光突破黑暗,破晓而出的场景,也象征了360手机经过长时间的努力,即将在发布会上与大家见面的迫不及待;② 手机翻转后,逆光而行的背影、上方1.14标志的高楼大厦,升起的灯火都在视觉上给人以极大的冲击力
-
技术上,翻转手机采用的是HTML5的重力感应,上下小幅度移动的大楼,灯火等元素的动画主要采用的是CSS3的animation
-
体验上,视觉上很震撼,翻转手机产生不同的效果也不少见,但是直接翻转手机后,倒着看的H5案例,小编暂时就见到了这一个,玩到最后发现实际上是360手机新品发布会,商品和小游戏相结合,总体来说还是蛮有新意的~
技术实现: Zepto
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号