片仔癀：打开音量向左慢滑

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

案例：打开音量向左慢滑

出品：片仔癀

亮点：

策划上，宣传“片仔癀”牙膏。表现的形式，以一个广告人的独白，讲述广告人早起上班、坐地铁、做策划、做提案、去现场给甲方讲述方案、得到金主甲方认可、最后下班回家刷牙睡觉。里面有很多甲方品牌牙膏的露出，展现合情合理，不突兀。小五很喜欢H5里面的一句话“你有千万个上火的理由，但千万别给发火找理由”，恰到好处的说明了牙膏“清火”的产品特点。
设计上，漫画手绘风格，可以看出漫画师的手绘功底杠杠滴。
交互上，一直横屏滑动观看整支H5。观看的过程中，故事情节的推进，配合背景独白。如果往回拉动，动画还可以倒播。最后一屏的按钮“玻璃重播”，链接错了。直接去了一个IP地址，微信里面是不能放IP链接。
技术上，动画细腻的可圈可点，运用了JS动画库，可以访问greensock（网址https://greensock.com）了解这个动画平台。

技术实现： greensock(强大的JS动画库) + howler.js(音频控制JS插件)

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

识别图中二维码

打开音量向左慢滑-查阅二维码

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

标签