农夫山泉:维他命水 STYLE

2017-08-11 H5案例分享 H5案例分享
农夫山泉:维他命水 STYLE

案例:维他命水 STYLE

出品:农夫山泉

亮点:

  1. 策划上,DIY说唱MV合成,即输入歌词自动生成说唱MV。Loading完毕,首屏是主题页面,提示用户“滑动手指来打碟”,用户触摸打碟机进入DIY部分,选择你的嘻哈造型,此部分分为3个步骤:通过左右滑动屏幕,来选择中意的瓶身;2.选择头部造型,从预设的几个发型、配饰、特征中,搭配一套喜欢的;3.点击按钮输入歌词,开始制作。最后点击确定,即可生成歌曲MV,MV主角是刚才DIY的造型,背景音乐则是输入的歌词与伴奏的合成。结尾页可以点击按钮观看MV,如果不满意作品,能点击按钮“重新编辑歌词”。除此之外,还能“分享至新浪微博”,或点击 “喝农夫山泉维他命水,获得嘻哈投票权”来查看活动规则。若在结尾页选择分享,用户分享给好友的就是自己DIY的作品。

 

  1. 设计上,黑金为主色调(莫名有种贵族气质你敢信)。案例中可供选择的元素很多,趣味性非常强,当然对小五这样的选择困难癌患者,也友好地提供了“随机造型”这样有爱的设计。每一页的背景都一直处于动态,整体看起来非常有活力。MV部分除了将歌词与伴奏合成,还将歌词放在MV画面上与音乐同步。

 

  1. 体验上,本来以为只是输入歌词,系统念出来,糊弄一下用户,但是发现歌词每一个字,都根据字数情况的不同,刚好卡在伴奏的鼓点上,最终效果就是让用户情不自禁地开启抖腿模式。案例各处细节做得非常用心,到位,策划用心,设计精美,制作精良,小五超喜欢这支H5。以前,别人问“yo你会freestyle么”,我往往不知道怎么回答,说“有”又不想傻兮兮地唱给对方听,显得很der,但说“没有”又显得自己不够酷…以后再也不用纠结了,直接把自己DIY的作品扔给对方,甩发离开,不留一点云彩…



技术实现: CreateJS



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

识别图中二维码

维他命水 STYLE-查阅二维码




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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

Tmall 天猫:天猫幻响电音节

NIKE 耐克:Remix My Airs

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~