Eleva 菁智：菁智更懂好有机

2017-08-31 H5案例分享 H5案例分享

案例：菁智更懂好有机

出品：Eleva 菁智

亮点：

策划上，图文展示类，来自有机王国丹麦的雅培旗下超高端进口有机奶粉—雅培菁智有机，带领大家一起领略丹麦童话的纯真世界，翻开童话书，以各种动画形式分国土篇、鲜奶篇、感知篇展现了雅培菁智如何用纯鲜守护纯真，并在尾页引导用户去天猫旗舰店购买。
设计上，颗粒漫画风格，采用绿色作为主色调，棕黄色作为辅色调，里面的主人公采用奶牛的形象，并以有机农场做背景，与菁智有机奶巧妙结合。
交互上，① 向左滑动屏幕即可房业，根据提示长按屏幕下方按钮，云朵合拢再散去，进入到书里面的场景里，松开手指，画面缩回在切换到书上；② 在“鲜奶篇”，长按后不仅会切换画面还会出现视频提示，点击视频提示即可换看“新鲜”小秘密。
技术上，这支H5主要采用Canvas + CreateJs来实现的。
体验上，翻页的的效果太慢了，需要好几秒才翻页成功，这点体验很不好啊。

技术实现： Zepto + CreateJs

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

识别图中二维码

菁智更懂好有机-查阅二维码

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

标签