晨光 + 连咖啡:晨光666陪战考试季

2019-06-04 H5案例分享 H5案例分享
晨光 + 连咖啡:晨光666陪战考试季


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

识别图中二维码

晨光666陪战考试季-查阅二维码

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


案例:晨光666陪战考试季

品牌:晨光 + 连咖啡

亮点:

1. 创意策划

以大部分都会经历的高考为主题,高考对大部分人来说,都是一个特别的记忆。晨光和连咖啡以布置场景的形式,展示了“我的陪战书桌”。

 

首先需要输入姓名和高考年份;

而后进入DIY书桌,一共6组道具可以选择,分别是战场、秘籍、装备、回血、回忆杀、吉祥物。

 

战场:里面有两个大背景可以选择;

秘籍:就是我们高考用的各种类型图书;

装备:笔和铅笔盒等;

回血:各种饮料;

回忆杀:小时会看的读者等杂志和手持游戏机、老式茶缸等;

吉祥物:祝福高考成功的小图。

 

其中有黄色边框,配有“点我”图标的道具,点击后,屏幕上会有动画。

 

DIY海报完毕后,点击屏幕右上角,选择陪战宣言(也可以自己输入),填好,或者选中后,点击“选这句”按钮,生成你的专属陪战书桌海报。

 

2. 设计上

扁平卡通风格,选择的道具到时很用心,太眼熟了。

 

3. 技术上

使用canvas进行合成操作,不过这个案例,使用的是原生js,没有借助框架(PixiJS、或者CreateJS、白鹭引擎、或者coco2dJS)。

 

4. 体验上

道具的操作感觉微微有点卡顿,点击不同道具组菜单,加载时间有点长。



技术实现: canvas + javascript



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

标签

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

相关推荐:

网易大神:我的游戏名片

网易云音乐:假如送你回到1999年旅行

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~