劲牌：拯救乏味无劲不欢

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

案例：拯救乏味无劲不欢

出品：劲牌

亮点：

策划上，图文展示类的h5。这是由劲牌为宣传双十一活动所打造的一款主题为“拯救乏味无劲不欢”的宣传h5。① 在开始屏幕中，醒目的“拯救乏味，无劲不欢”摆放楼门的上方，一个缓缓的小手引导着用户点击进入大楼。② 随着用户进入，采用楼层式分布，将五个场景分别融入到五个楼层中，在每个楼层中先是展现静态的画面，随着用户的摇晃、点击、滑动，使得这个楼层的人物变得动态化，富有朝气化，打破以往的静态局面。③ 以前面由静态格局到动态格局的改变为铺垫，借此在尾屏推出在天猫双十一中“无劲不欢”的活动，达到宣传的目的，并且也添加了让用户可以复制上面的淘宝口令去打开商店页面，也是一个很不错的设计亮点。
设计上，立体手绘风格的h5，以红色作为主色调，人物栩栩如生，立体感十足。
技术上，① 页面的点击、滑动等操作采用了Hammer.js技术进行实现。② 页面结束时的淘宝口令的复制效果采用了Clipboard.js技术进行实现。③ 在每层楼层场景发的页面中采用CSS3中的Matrix技术和CreatJS技术进行动画特效的实现。

技术实现： jQuery + Hammer.js + clipboard.js

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

识别图中二维码

拯救乏味无劲不欢-查阅二维码

完整欣赏此案例大约需要1分钟40秒

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

标签