友金所：谁是朋友圈打脸王
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要3分20秒
案例：谁是朋友圈打脸王
出品：友金所
制作：橙意机构
亮点：
- 策划上，视频类，视频内容针对小孙想请年假展开，当面对老板不正面回复你的请求时，要做好两手准备，页面出现“谈谈理想”和“直截了当”两个选项，选择后进入两段不同的视频内容，小孙说说自己的理想计划后，老板不急不缓的说出现状…最终两个选项的结果都是小孙被老板KO，此时进入下一阶段，页面出现两个选项，“再战一局”和“我认输”，引导用户继续下一段视频，进入最后一段视频，引出小孙不是一个人在战斗的主题。内容结束，获取用户的头像和昵称，选择年初说好的事，点击提交，可生成用户专属的打脸指数和朋友圈打脸排名。
- 设计上，漫画风格，线条以红色黄色黑色为主页，比较简单；同时又加入了微信录屏、弹幕等形式，增强了趣味性；小孙衣服上的友金所、视频中的文字等，很充分的漏出品牌；小孙头戴紧箍咒，老板佛祖面相，搞笑，又暗示该H5中小孙的最终结局，工作是逃不过的。
- 交互上，该H5由三段视频组成，视频之间有选项可以选择，增加了与用户的互动，让用户更有参与感；微信画面中获取了用户的头像，增强了代入感。
- 技术上，使用了canvas实现了微信界面的动画效果。
- 体验上，小五觉得这个H5的优秀之处在于细节处理的很好，微信聊天界面获取了用户的头像，增强了用户的参与感，后期、两个连续的视频，用户可根据选项进入不同的内容；视频结束后会生成用户的专属打脸指数，很有意思。目标就是用来打脸的…金句！
技术实现： jQuery+canvas+video
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
