好乐门：您的专属圣诞菜谱

2017-12-18 H5案例分享 H5案例分享

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

识别图中二维码

您的专属圣诞菜谱-查阅二维码

完整欣赏此案例大约需要1分40秒

案例：您的专属圣诞菜谱

出品：好乐门

亮点：

策划上，圣诞长图类，圣诞来临，您准备好迎接正在寻找圣诞美味的食客们了吗？① loading结束后，以长图的展现形式，将一家人在圣诞节对美食有各种要求的想法表现出来，有健康的沙拉、油腻的火腿、美味的火鸡和鲜嫩的牛排等等，并配合着每种想法，H主厨展示出一份菜谱；② 而后点击礼盒，即可发现H主厨轻松应对这么多美味大餐的秘密，原来是好乐门纯正蛋黄酱，点击尾屏“收藏圣诞菜谱”，跳到菜谱页，长按即可保存菜谱。
设计上，插画风格，采用红色作为主色调，整个画面很有圣诞的味道，还有视觉差动画的形式让整个动画显得更有画面层次感。
技术上，这支H5滑动效果主要是采用ScrollerJS（JS滑动插件），里面的画面和小动画等主要是用Canvas + CreateJs来实现的。

技术实现： ScrollerJS + Canvas + CreateJs

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

标签