Nike 耐克:切袭无踪

2017-01-11 H5案例分享 H5案例分享
Nike 耐克:切袭无踪

案例:切袭无踪

出品:Nike 耐克

亮点:

  1. 策划上,图片合成+故事漫画。载入完毕进入页面,点击“创造你的漫画”进入图片合成部分,上传两张“带有速度感的打球酷照”点击确定,即可开始看漫画,照片会自动合成并做黑白滤镜处理,使其看上去与漫画风格搭配。中途“进入”欧文的储物间,可以选择一件物品,来引发后续的故事,接着还要上传“运球突破”、“脸部自拍”照片来完善故事。最后生成一张海报是欧文跟用户的合影,图片可以长按保存。结尾页可以点击“播放故事”来自动播放生成的故事,或选择“再玩一次”,也可以上滑屏幕查看活动信息。

 

  1. 设计上,黑白漫画风格,用户上传的照片会自动处理成同样的风格,虽然颜色是黑白,但画面表现力非常赞,搭配背景音乐,从头到尾都是一种很“燃”的氛围。画面细节很丰富,比如一些元素会根据触摸,而进行3D感的微微移动,让人感觉炫酷而又细腻。

 

  1. 体验上,画面炫酷,内容有趣。交互上,与用户联系也很紧密,一共要上传四张照片,耐心不足的用户可能会随时退出,但小五感觉丰富好玩的画面和内容,足以留住用户把故事玩完,并且去体验另外的故事线。



技术实现: JavaScript + CSS3(Animation)


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

识别图中二维码

切袭无踪-查阅二维码




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

标签

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

相关推荐:

Air Jordan:颠覆魔星统治

NIKE耐克体育:管你怎么玩

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~