肯德基:教你如何轻松获得限量版2233
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分48秒
案例:教你如何轻松获得限量版2233
出品:肯德基
亮点:
1.策划上:这是通过类似寻宝参与五种小游戏来获取肯德基珍宝,找到22/33娘(共五个),第一项,找不同,不一样的国宝等你来发现;第二项,跳格子,眼福和口福真的不能兼得吗;第三项;国宝拼图,国宝是不是很美;第四项,吃掉炸鸡,出现历史人物雕刻,显示国宝不远了;第五项则出现红包,点击会出来获取肯德基等优惠券,后面就是bilibili注册用户。
2.设计上,以棕色为主色调,以明宪宗元宵行乐图为背景图,找寻进入页面时图片的中的小人物22/33娘,点击人物,参与游戏。
3.交互上,采用了H5,首先进入是,有个四个小表情,然后出现22/33娘进度条利用H5动画效果等待进入,进入开始寻宝页面(页面内出现canvas动画各种人物的走动摇摆动态效果)时,用手指来放大缩小屏幕和移动屏幕来寻找22/33娘,22/33娘出现的地方,点击22/33娘则会消失,然后进入小游戏,完成游戏后,有个当前进度条,依次完成,当进入条到5/5时,则最后获取肯德基优惠券,最后是bilibili注册用户。4.体验上,前面找不同,跳格子,拼图游戏效果还不错,游戏过程流畅,配上音乐,整体氛围有趣,到后面两项是,插入肯德基桶装炸鸡,开红包,出来肯德基优惠券插入的有些生硬。
技术实现: 前端技术 react jQ
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号