汤成倍健：塑料姐妹花联盟（4）

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

案例：塑料姐妹花联盟（4）

出品：汤成倍健

亮点：

策划上，视频类。这是由汤成倍健在双十一即将到来之际所打造的一款宣传h5，主要分为三个阶段。① 群聊阶段之前。“春天到了，又到了动物交配的季节”文字挨个在屏幕闪现，吸引读者的注意力，接着“啊呸”俩字的弹出，剧情反转，“备受摧残的塑料姐妹花们，正在筹划一个有营养的周末假期”。② 群聊阶段。在微信聊天界面中，主人公以“48小时环游世界”为主题在群聊中求约，接着主人公开启美女学霸模式，先后运用物理、天文地理、数学等知识，讲述自己如何在48小时内就能完成环游世界的壮举。戏精是怎么练成的，就是这样练成的。③ 群聊结束阶段。由想象回到现实，从营养的周末假期入手，引出汤成倍健，并将汤成倍健的产品与iphone7进行对比，凸显其强势之处。末尾处有一个“马上出手”的按钮，用户可以点击进行复制淘宝口令，从而开启你的春天。
设计上，Q版搞笑风格。① 卡通人物夸张的表情和动作搭配脑洞大开的剧情，笑点满满。② 亮色之间的搭配融合，从而将场景渲染的美轮美奂，符合一个戏精的修养之路。
技术上，① 视频内容的播放采用了html5中的Video标签技术实现，用到的Video标签属性有：poster、playsinline、x-webkit-airplay等。② 尾屏中，淘宝口令的复制采用了Clipboard.js技术实现。

技术实现： Zepto + Clipboard.js

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

识别图中二维码

塑料姐妹花联盟（4）-查阅二维码

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

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

标签