狼人杀&&网易考拉海购：狼人杀预言家在线开运

2018-03-02 H5案例分享 H5案例分享

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

识别图中二维码

狼人杀预言家在线开运-查阅二维码

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

案例：狼人杀预言家在线开运

出品：狼人杀&&网易考拉海购

亮点：

策划上，Loading完毕，进入一段动画，进入大门，引导用户输入生辰，点击下方的按钮，进入一段过渡动画，最终生成用户专属的旺年运势。点击“开始抽奖”按钮，引导用户抽取开运物品，可长按保存图片、分享、下载狼人杀游戏。网易考拉海购品牌漏出在抽奖部分。
设计上，页面整体以黑色为主，恐怖夸张的预言家造型，令人毛骨悚然的背景音乐，狼人杀的气氛营造的很好，神秘感。
交互上，交互方式有点击页面和长按屏幕两种，H5一步步引导用户操作，互动比较多。
技术上，使用了canvas实现了H5的动画。
体验上，小五觉得该H5的设计有些单调，开头场景很神秘，主要操作很简单，嗯，喜欢它的环境。

技术实现： zepto.js+canvas

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

标签