New Balance 新百伦:你的2017成长关键词

2018-01-05 H5案例分享 H5案例分享
New Balance 新百伦:你的2017成长关键词


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

识别图中二维码

你的2017成长关键词-查阅二维码

完整欣赏此案例大约需要3分钟


案例:你的2017成长关键词

出品:New Balance 新百伦

亮点:

  1. 策划上,视频+DIY海报生成。New Balance新品574S的宣传。Loading完毕进入首页,点击屏幕上的手势按钮,会播放一段短视频,视频以关键词的形式,回顾了一对情侣从相遇到释怀的故事,由此引出案例的主题“你的2017关键词是什么”。进入第二部分,用户可以选择“听听他们的成长故事”来观看短视频的完整版。点击下方“生成你的成长关键词”则进入DIY海报生成部分,可以左右滑动的形式切换关键词海报模板,选择完毕可以点击下方“选择本页进行编辑”来编辑此模板,或者也可以直接选择“自定义你的关键词”来编辑。编辑页可以上传更换配图,主题文字与描述文字均可以自己输入,完成后点击“生成海报”并稍等片刻,即可生成带有微信昵称的专属海报,海报可以长按保存为图片。结尾页点击“前往官网”跳转New Balance网页,点击“立即分享”提示分享给好友。

 

  1. 设计上,视频和海报部分的背景,均为当前内容的高斯模糊效果,整体画面很和谐也很有感觉。主题音乐选用了“Love Ain’t Red - Chochukmo”,曲风混合了清新与摇滚,自由又略带伤感,与“爱”的主题非常贴合。演唱这首歌的乐队的音乐风格,通常被形容为“将不同乐风与摇滚揉合,充满实验味道的风格”,他们的音乐普遍被归类为独立摇滚,亦有不少人它们归类为数学摇滚。

 

  1. 体验上,案例视频部分有点小伤感,不过整体感觉是美的,海报自由度很高,虽然不可以换位置,但除了Tag之外的文字部分都可以编辑,生成的海报也会带上用户昵称。案例最吸引小五的,便是曲风清奇的主题音乐了,小五特地用网易云听歌识曲了一波,打开评论后发现,原来大家都是从NB的广告搜到这首歌的。这支乐队的其他作品也都很不错哦,感兴趣的小伙伴们可以去听听~



技术实现: Pixi.js + howler.js + Swiper



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

标签

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

相关推荐:

New Balance:欧阳靖的Battle,你敢接吗?

New Balance:这是一本我的词典

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~