京东超市 + 中粮:寻TA陪你过中秋

2018-09-29 H5案例分享 H5案例分享
京东超市 + 中粮:寻TA陪你过中秋


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

识别图中二维码

寻TA陪你过中秋-查阅二维码

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


案例:寻TA陪你过中秋

出品:京东超市 + 中粮

亮点:

  1. 策划上,用一则简短的漫画描述一个情境,讲述一个小故事,工作在城市中的你,每天搭乘着拥挤地铁上班,忙完一天的工作,最后感叹终于下班了,而后进入男女两个故事场景的选择。选择男生,讲述男主下班后,跑步5公里;选择女主,生活的仪式感,下班后去京东超市。最后是写寄语卡片,男女主的默认寄语不同,选择好后,可以生成寄语祝福海报。
  2. 设计上,采用四格漫画的形式,用简笔画勾勒出了在大都市打拼的青年男女的生活现状。细节很丰富,有中秋的烟花、超市门口的小狗、男主加班打字的声音。这些细节让这则案例更贴近生活,很容易将用户带进情境中。
  3. 技术上,使用 Vue.js 搭建案例的整体结构。使用 PIXI.js 来完成每个格子漫画之间的切换动画,以及场景中人物的动作变化。使用 TweenMax 来添加场景过渡的时间函数。
  4. 体验上,漫画场景之间衔接自然,内容过渡流畅不拖沓。既包含视觉上的动画效果,又包含内容衔接所用的口播文案,还有场景选择时的点击选择。多种方式相结合,吸引用户向下探索。



技术实现: PIXI.js、TweenMax、Vue.js



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

标签

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

相关推荐:

京东超市:请让我照顾你

京东超市:我的成长回忆录

10个案例了解H5之图片合成

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

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

方式一:

通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿

方式二:

在电脑端,进入H5案例发布界面,自己编写

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~