网易严选 X 必胜客：投资方说了，这家「黑店」，必须巨资打造

2017-11-09 H5案例分享 H5案例分享

案例：投资方说了，这家「黑店」，必须巨资打造

出品：网易严选 X 必胜客

亮点：

策划上，视频类。这是由网易严选和必胜客为联手所开的“黑店”所打造的一款宣传h5。① Loading页面。黑暗中，一双男鞋与女鞋随着加载的进度渐行渐近，他们之间会发生什么的故事呢？② 视频播放阶段。黑暗中，依稀可见的只有两人的嘴巴和眼睛。通过两人的对话了解，男方是必胜客家的黑比萨，女方是网易严选家的黑凤梨。期初俩人只是互损彼此，因吃瓜群众的“助攻”，继而引发口水大战。在口水大战时，一个不注意就亲到了一起，突然整个世界都亮了。前一刻口水大战的双方，因一个不小心的吻变得含情脉脉。情到深处自然深，热恋中的小情侣决定联手开一家“黑店”。③ 尾屏。“这个黑店66666，约上TA走一波”，进行推广宣传，用户可点击领福利按钮去进行详细了解。
设计上，Q版搞笑风格。① 全款h5以黑色主要色彩基调，在黑色的背景中，用白色勾勒人物的嘴巴和眼睛。② 红色及黄色对头顶上的怒气、吻等元素的渲染，不仅可爱满满，还搞笑十足。③ 对话人物的Q版化，既能萌萌哒，又能笑笑哒。
技术上，视频内容的播放采用了html5中的Video标签技术，用到的Video标签属性有：poster、playsinline、x-webkit-airplay等。

技术实现： jQuery

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

识别图中二维码

投资方说了，这家「黑店」，必须巨资打造-查阅二维码

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

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

标签