美的：神秘失踪_H5案例分享

美的：神秘失踪

2017-11-08 H5案例分享 H5案例分享

案例：神秘失踪

出品：美的

亮点：

策划上，长图类，① 在微信聊天页面，老板发起寻求帮助的请求，（原始链接上展示的找老板大人，但在好友间分享时，会拉去双方的昵称和头像，变为一个寻找分享者的过程），玩家点击发送告诉老板自己马上赶过去；② 你在夜黑风高的夜晚终于到达了目的地——一个非常偏僻的地方，向左滑动，通过一个亮着灯的房间里的人的对话，得知老板可能是去四壹山寻找宝藏去了；③ 在野猫四窜的山里找到他的背包和日记，老板真的是去寻宝了并找到了宝藏的线索，根据线索来到一个恐怖怪异的山洞，在山洞的另一个出口找到老板大人并看到一个传送门；④ 走进传送门，发现宝藏：11.11狂欢节，美的商城，百台家电五折起。
设计上，主要采用的是恐怖诡异风格。一开始的页面模仿的是微信聊天页面，比较写实；后面寻找老板的过程界面，走的是恐怖风格，神秘诡异的偏僻地点、骷髅乱入的山洞等，分分钟吓人一跳；与末尾的美的双十一狂欢画面形成强烈反差，令人对美的双十一活动更加印象深刻。
技术上，寻找老板，发现宝藏的长图页主要是采用Canvas+ PixiJs + Tween.js来实现的。

技术实现： Zepto + PixiJs + Tween.js

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

识别图中二维码

神秘失踪-查阅二维码

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

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