浦发银行：吃土私房食谱

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

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

识别图中二维码

吃土私房食谱-查阅二维码

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

案例：吃土私房食谱

出品：浦发银行

亮点：

策划上，视频类，主页是个漂亮的页面，用一锅土代替了soil中的o，锅中的土和一旁的树叶也表明了主题--吃土文化。点击查看菜谱可以观看一段视频，内容是吃土文化和两种吃土美食：铁板黑土排、石锅红土煲。视频结束后定格在石锅红土煲的照片上，下方有两个选项，回顾美味和决不吃土。点击回顾美味再看一遍视频，点击绝不吃土进入浦发银行的宣传页面，有各种优惠，意在吸引关注浦发银行和使用浦发银行信用卡。
设计上，loading页面是一双筷子，符合主题，很有新意。设计的画面很美，视频也很漂亮，虽说内容和主题都不着调，但是画面唯美、介绍优雅、声音磁性，让人忍俊不禁，不仅看了看数遍还想分享给朋友。所以从宣传的效果来看十分成功。
交互上,视频是竖版播放，可以暂停、静音或调整进度。
体验上，最喜欢这种一本正经地胡说八道的风格了，优雅的声音和诙谐的内容融合在一起，有一种另类的幽默感，每每想起都会心一笑。

技术实现： Jquery.js+vedio

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

标签