晨光 + 连咖啡:晨光666陪战考试季
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例:晨光666陪战考试季
品牌:晨光 + 连咖啡
亮点:
1. 创意策划
以大部分都会经历的高考为主题,高考对大部分人来说,都是一个特别的记忆。晨光和连咖啡以布置场景的形式,展示了“我的陪战书桌”。
首先需要输入姓名和高考年份;
而后进入DIY书桌,一共6组道具可以选择,分别是战场、秘籍、装备、回血、回忆杀、吉祥物。
战场:里面有两个大背景可以选择;
秘籍:就是我们高考用的各种类型图书;
装备:笔和铅笔盒等;
回血:各种饮料;
回忆杀:小时会看的读者等杂志和手持游戏机、老式茶缸等;
吉祥物:祝福高考成功的小图。
其中有黄色边框,配有“点我”图标的道具,点击后,屏幕上会有动画。
DIY海报完毕后,点击屏幕右上角,选择陪战宣言(也可以自己输入),填好,或者选中后,点击“选这句”按钮,生成你的专属陪战书桌海报。
2. 设计上
扁平卡通风格,选择的道具到时很用心,太眼熟了。
3. 技术上
使用canvas进行合成操作,不过这个案例,使用的是原生js,没有借助框架(PixiJS、或者CreateJS、白鹭引擎、或者coco2dJS)。
4. 体验上
道具的操作感觉微微有点卡顿,点击不同道具组菜单,加载时间有点长。
技术实现: canvas + javascript
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号