春纪：周冬雨分饰四角，对战天外来客！

2017-12-14 H5案例分享 H5案例分享

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

识别图中二维码

周冬雨分饰四角，对战天外来客！-查阅二维码

完整欣赏此案例大约需要3分钟

案例：周冬雨分饰四角，对战天外来客！

出品：春纪

亮点：

策划上，开头是以讲故事的方式，讲了蓝光危害少女皮肤，然后有个乞丐给了周冬雨四本秘籍，分别是天龙八音、玉女素心剑、凌波微步、天山折梅手。选择四种秘籍会变成四种形象，还有神技、攻击力等介绍，点击出战蓝光催老魔就有一些互动，但都会失败，只有选择天山折梅手或者点击制胜一招可以胜利。意在说明就算距离远、贴膜、闪避都无法挡住蓝光，只有春纪蓝光防护水可以抵挡蓝光，吸引人们购买蓝光防护水。
设计上，采用漫画讲故事的形式，用周冬雨战胜催老魔说明蓝光防护水的必要性，过程很有趣。
交互上,可以选择四种秘籍并出战发功等等，可以换招再战选其他秘籍，也可以点击求制胜一招直接选择天山折梅手。

技术实现： Jquery.js+howler.js+annie.js

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

标签