肯德基:教你如何轻松获得限量版2233

2018-11-26 H5案例分享 H5案例分享
肯德基:教你如何轻松获得限量版2233


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

识别图中二维码

教你如何轻松获得限量版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案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

别克×bilibili:Fix Feel

有道乐读:别人不知道,这是你与书的前半生

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~