饿了么：这是我的“卡路里秘密”，你呢？

2016-12-06 H5案例分享 H5案例分享

案例：这是我的“卡路里秘密”，你呢？

出品：饿了么

亮点：

策划上，首屏填写手机号，根据手机号对应的消费清单，合成你的吃货路，点击每一个食品分类还可查看你的消费额度，根据你的餐饮方面的消费量，估测所摄入的卡路里，并利用图文展示，滑屏翻页来说明如何消耗掉这些摄入量。
设计上，手绘漫画风，白蓝主体色，与饿了么品牌识相切合，还有萌萌哒的饿了么外卖小哥哦~
技术上，滑屏操作主要采用的是JS滑屏组件Swiper，其他动画主要采用的是CSS3的animation。

技术实现： jQuery + Swiper

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

识别图中二维码

这是我的“卡路里秘密”，你呢？-查阅二维码

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

标签