大众点评：山海吃货

2017-06-01 H5案例分享 H5案例分享

案例：山海吃货

出品：大众点评

亮点：

策划上，神话故事类，点击开吃，开启H5，① 将《山海经》中一篇篇精彩的神话故事“开天辟地”，“精卫填海”，“大禹治水”，“夸父逐日”进行再创新，生成“开天辟地”，“精卫填菜”，“大禹加趟”，“夸父追锅”的小故事，展现了人们对吃的孜孜以求；② 最后自然引出5.17吃货节，上大众点评，无所不能吃，在尾屏点击“点我有红包”，填写个人信息，还有机会领取福利哦~
设计上，漫画风格，采用棕色作为主色调，一篇篇小故事配上精致细腻的小动画，在配上翻书一样的翻页效果，让人感觉正在阅读《山海经》，很是有趣。
技术上，翻书效果采用的是用CSS3的animation来控制背景图片依次切换，里面各个故事的中央动态大图采用的是GIF动图，整体图片比较多，比较大，导致加载很慢。

技术实现： JavaScript

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

识别图中二维码

山海吃货-查阅二维码

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

标签