New Balance 新百伦：你的2017成长关键词
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要3分钟
案例：你的2017成长关键词
出品：New Balance 新百伦
亮点：
- 策划上，视频+DIY海报生成。New Balance新品574S的宣传。Loading完毕进入首页，点击屏幕上的手势按钮，会播放一段短视频，视频以关键词的形式，回顾了一对情侣从相遇到释怀的故事，由此引出案例的主题“你的2017关键词是什么”。进入第二部分，用户可以选择“听听他们的成长故事”来观看短视频的完整版。点击下方“生成你的成长关键词”则进入DIY海报生成部分，可以左右滑动的形式切换关键词海报模板，选择完毕可以点击下方“选择本页进行编辑”来编辑此模板，或者也可以直接选择“自定义你的关键词”来编辑。编辑页可以上传更换配图，主题文字与描述文字均可以自己输入，完成后点击“生成海报”并稍等片刻，即可生成带有微信昵称的专属海报，海报可以长按保存为图片。结尾页点击“前往官网”跳转New Balance网页，点击“立即分享”提示分享给好友。
- 设计上，视频和海报部分的背景，均为当前内容的高斯模糊效果，整体画面很和谐也很有感觉。主题音乐选用了“Love Ain’t Red - Chochukmo”，曲风混合了清新与摇滚，自由又略带伤感，与“爱”的主题非常贴合。演唱这首歌的乐队的音乐风格，通常被形容为“将不同乐风与摇滚揉合，充满实验味道的风格”，他们的音乐普遍被归类为独立摇滚，亦有不少人它们归类为数学摇滚。
- 体验上，案例视频部分有点小伤感，不过整体感觉是美的，海报自由度很高，虽然不可以换位置，但除了Tag之外的文字部分都可以编辑，生成的海报也会带上用户昵称。案例最吸引小五的，便是曲风清奇的主题音乐了，小五特地用网易云听歌识曲了一波，打开评论后发现，原来大家都是从NB的广告搜到这首歌的。这支乐队的其他作品也都很不错哦，感兴趣的小伙伴们可以去听听~
技术实现： Pixi.js + howler.js + Swiper
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
