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

2018-09-29 H5案例分享 H5案例分享

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

识别图中二维码

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

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

案例：寻TA陪你过中秋

出品：京东超市 + 中粮

亮点：

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

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

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

标签