温商贷：二十四节气-霜降篇

2017-10-23 H5案例分享 H5案例分享

案例：二十四节气-霜降篇

出品：温商贷

亮点：

策划上，对话+rap说唱类，页面主要分为两部分，① 以对话的形式探讨门前柿子的形状，小燕子、五阿哥、容嬷嬷等人纷纷发表了自己的看法，但是众说纷纭，皇上很失望，无奈之下呼唤福伦；② 福伦以鬼畜的rap形式，形象的讲述了温商贷理财所获得的收益救了一方百姓的事情，在最后柿子树长出的，奇形怪状的柿子化为了温商贷logo的形状，并引出二十四节气之霜降，从而达到其宣传目的。
设计上，漫画风格，采用棕绿色作为主色调，橘红色作为辅色调，柿子的排列形状与温商贷logo的形状结合的很巧妙，整体画风搞怪，配音鬼畜，让人印象深刻。
技术上，里面的对话配音和rap说唱配音采用的都是Html5的audio音频。

技术实现： Vue.js + WebPack

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

识别图中二维码

二十四节气-霜降篇-查阅二维码

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

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

标签