H5解析｜“薛之谦的恋爱诊所”这样爆款级的案例是如何炼成的？
现在的H5，真是一点也不矜持，现象级说来就来！今天就给来大家介绍近期这个几个爆款级案例。一起来深入研究一下它们有哪些技术点的应用。
案例简介：
1、俄罗斯方块大家一定玩过，但你可能没玩过这么不正经的。
2、薛之谦这次不耍贱，开了个诊所来一本正经的帮你解决你的恋爱问题。
3、七夕就剩几天了，你的表白准备了好吗？这个H5有你的爱豆给你的表白信，还有精灵信使帮你传递七夕告白。
案例目录：
▶俄罗斯方块游戏H5：恕我直言，一看就不是什么正经猫
▶交互式H5：污力薛之谦的二次元恋爱诊所
▶录制音频类H5：精灵信使帮你传递七夕告白
1
案例：恕我直言，一看就不是什么正经猫
品牌方：网易新闻
这款h5以俄罗斯方块游戏展开，用不同体态的猫来代替俄罗斯方块。添加了一些搞笑有趣的猫元素在其中，使整个H5画风变的诙谐起来。点击这里立即体验案
案例以黑白简笔画风呈现，背景音乐也是十分魔性洗脑。首页页面由div+css3构成；动态效果为css3代码实现；猫咪扭动则是由4个帧图切换实现；下方的START按钮是PNG图片。
开始游戏后，俄罗斯方块以猫的体态出现。游戏界面为代码canvas实现；先画出背景图片，然后把游戏格子按钮画好。再由代码生成的方块对象（不同体态的猫咪）展现出，每个对象（不同体态的猫咪）由四小方块组成，再由代码判断填满一行则消掉一行。游戏逻辑和按钮事件都由代码实现。
游戏结束后，结果页会显示成功或失败，界面还弹出旋转嘲讽字眼，和鄙视眼神的不正经猫。文字旋转为css3实现动态效果，界面背景和鄙视眼神猫则均为PNG图片，最后用户可以点击“再玩一次”继续受虐，或者点击跳转查看“猫病毒报告”，按钮的位移效果则为代码实现出。然后在按钮上加上a标签，即可点击跳转到指定网页。
这个俄罗斯方块H5是不是很有趣，小编在玩了好几次都失败，记得以前玩俄罗斯方块不是这样的，所以愈发怒玩到成功为止。小编在体验玩后还一直被babababa背景音乐洗脑了。接下来在来看看这个更加魔性的案例，你有什么感情纠结问题玩这个H5就能解决。
☟☟☟
2
案例：薛之谦的恋爱诊所
品牌方：腾讯动漫
交互式视频类H5案例，充满爱的粉嫩日系风格的薛之谦恋爱诊所，用户可以通过选项与薛之谦互动，并向薛之谦按选项提问所要问的问题，而薛之谦会帮你解决一切恋爱问题。点击这里立即体验案
视频中，首先二次元画风镜头切入，开始后以，“叫醒薛之谦”，3种方式都有薛神医的不同反应。秉持了薛之谦一惯无厘头风格；而正确打开后，会出现四个恋爱问题，每一个恋爱问题，薛之谦都有对应的处方。
整个案例都由MP4视频播放；视频中的二次元动画图都为视频后期特效制作，再将按钮添加到视频上，而视频播放片段会根据用户选择的选项答案再跳转到指定场景在继续播放。
案例主要以粉色色调为主。加上薛之谦贱贱的表演，和带有声音的对话，使整个H5场景感十足。真人拍摄视频加交互动作；MP4 视频播放。
用户通过点击按钮，跳转到对应视频的关键帧。（注：Android只有在QQ域名上才能加上按钮、元素及其他事件。具体如何实现请在再下方找我们资深客服妹纸解答吧）最后薛之谦会根据用户的回答递出相应爱情症状的诊断书。频播放十分流畅，娱乐性也很强。尾页诊断书背景由css3+帧图实现，按钮为PNG图片。
现在恋爱问题解决了，那就趁七夕赶紧去表白，这里有个神奇帮助你。
☟☟☟
3
案例：精灵信使传递七夕告白
品牌方：博柏利
录制音频类案例，由Burberry精灵化身为爱的信使，用户可以随便倾听架起一座七夕鹊桥，这独特的鹊桥由用户和明星的告白气球组成，以“录制七夕告白”为主要方式让用户去自主选择是否录制。然后选择是否公开与鹊桥中。点击这里立即体验案
进入后，用户点击按钮“开始体验”，这时小彩球逐渐放大，充满整个屏幕。所有的彩色气球都是可点击，而播放的语音是对应人给到的七夕祝福录音，点击气球就能收听到爱豆语音内容。背景是白色PNG图片，用彩色的气球和精灵信使突出H5的整个色彩。
气球语音播放则是由SDK接口实现的录音与播放功能。H5录音的按钮由PNG图片组成，播放的录音跳动为GIF图。
用户也可以选择一个精灵信使，然后录制自己的声音，可自己私密或者公开上。精灵信使为GIF动画，点击跳转的按钮为PNG图片。
在H5广告大行其道的今天，各种H5案例更加层出不穷，每个都各具特色，希望今天小编解析案例上的技术实现和策划上的亮点，都能够帮助各位大大在做H5策划的时候有明确思路。
H5解析｜“薛之谦的恋爱诊所”这样爆款级的案例是如何炼成的？相关推荐
- 揭秘“爆款级”产品！看葡萄城活字格低代码平台是如何诞生的
根据海比研究院发布的<2021年中国低代码/无代码市场研究报告>分析显示,低代码市场成熟度高,正处于成长期初段.中国低代码使用人员规模达42.6万人,另外预计有164万人在使用自有或开源的 ...
- 2021小程序该怎么做？爆款产品拆解案例来了
小程序从0到1,有许多天然的优势,大多数产品新人入行之初,都没有接受过体系化的学习和训练,可能只是写过几次需求文档.画过几次流程图,就误打误撞进入了创业公司.而在很多创业公司中,产品经理不仅没有明确的 ...
- 从vivo S系列看存量用户竞争时代的手机“爆款”打造逻辑
手机行业难再爆款,却又见爆款! 7月15日,vivo S10系列新机正式发布.值S10发布之际,玺哥从业内渠道获悉,vivo S系列累计用户数已突破2500万,成为当下中国年轻细分手机市场难得的真&q ...
- 产品经理应该如何打造爆款产品
对于大多数营销人来说,刷屏是件可遇而不可求的事情.今天AAA教育的小编就来盘点一下网易公司2018年常见的推广形式.希望对明年的广告人和刷屏的H5有所启发~ 大家剖析着那些爆款且优质的案例,也在实践的 ...
- OPPO打造R系列现象级爆款的做法已悄然改变
OPPO跻身国产前四,其中一个办法是打造爆款级产品,不过这种营销手法带来的效果却越来越难凑效,对比这两年其R系列销售的情况可知去年R系列的表现已不如往年,这也迫使OPPO采取了不同以往的做法. 去年R ...
- 如何打造一个爆款H5？
H5以链接的形式存在,不需要下载软件,点开链接即可浏览,用户体验良好,成本低,可用性高.它一般被用于一些节日贺卡.页面游戏.交互视频.户外大屏等场景,非常的适合投放到朋友圈或自媒体平台.但随着H5大热 ...
- 智能混剪系统爆款生成器移动端-----H5手机版(小程序端)
智能混剪系统爆款生成器移动端手机版 ------ 开发剪辑软件类工具(行业模板化操作) //整理@用户功能 $at_users = []; if (!empty( ...
- 爆款微信h5小游戏到底有什么相同点？
细数小编2020年玩过的h5爆款游戏,为什么这些游戏能够脱引而出,不是没有道理的,在此为大家实力解读一波,讲解下这些H5游戏都有哪些相同点~ [游戏内容] 代入感-情怀&热点 如果你的用户群没 ...
- 打造店铺爆款的玩法方式解析
在淘宝上每家店铺都会或多或少有一两样产品是店铺的爆款,而打造爆款并不是什么易事,打造爆款的方法和技巧也是非常多的,比如有的商家会通过补单的玩法方式来打造爆款,那么补爆款要怎么操作呢? 补爆款怎么操作有 ...
最新文章
- Enterprise Library 4 数据访问应用程序块
- Microsoft R 和 Open Source R，哪一个才最适合你？
- SYSAUX表空间使用率高问题处理
- Windows服务程序时钟调用
- PHP设计模式 - 门面模式
- hive中文字符乱码 解决方法【转】
- js一定要放在body的最底部么？聊聊浏览器的渲染机制
- Kubernetes群集的零停机服务器更新
- php7.0不出结合项,帝国CMS结合项提示“您来自的链接不存在”
- 自定义模块的查找方式
- java加载配置文件_java 读取和修改配置文件
- Makefile教程二 变量
- 一阶广义差分模型_计量经济学第10讲（时间序列计量经济学模型：序列相关性）...
- 金蝶K3WISE盘点机PDA扫码入库仓库条码管理，外购入库单
- 六度分隔，邓巴数和幂律如何主宰我们的社交网络
- python wx模块下choice列表框值怎么更新,python的内置模块
- oracle数据库userenv,oracle中的userenv及sys_context的参数
- 莫纳什大学计算机专业研究生在哪个校区,盘点莫纳什大学2019年计算机类硕士课程...
- 14-射频校准的原理和设置
- 超越云存储，用一勺蛋白质保存整个图书馆