Tmall 天猫 + vivo:全球首家自拍治愈馆开张

2017-07-20 H5案例分享 H5案例分享
Tmall 天猫 + vivo:全球首家自拍治愈馆开张

案例:全球首家自拍治愈馆开张

出品:Tmall 天猫 + vivo

亮点:

  1. 策划上,视频+图片处理。案例以第一人称视角展现故事,主人公是一位声音好听的萌妹纸(萌不萌不知道反正肯定没小五萌),来到一扇门前,此时用户点击打开并进入,通过电梯来到了二楼。原来这里是“自拍治愈馆”,所有来到这里的人,只要拥有自拍相关病症,都将会被天猫博士带入“神奇的治愈之旅”。有三种症状,点击可以“对症入室”,观看对应的动画,动画结束后,用户输入名字并上传自拍照来进行“治愈”,完成后能获得治愈证书,证书以图片形式呈现,用户可以选择长按保存至本地。结尾页可选择“自拍不能停”去别的屋治愈,或者“出示治愈书”分享给好友看。

 

  1. 设计上,画面风格多变。刚进入治愈馆时,整体色调偏暗黄,带有一点复古风格和神秘感。“黑夜焦躁症”治愈室内则是机械风格,色调由暗变明,对应治愈主题。 “存在感缺失症”治愈室内很明亮,整体色调偏粉,角色玻璃质感十足,画面充满科技感。“P图多动症”治愈室中角色是木制的,整体色调偏黄,动画效果有种木制机械风。所有视频中,元素都很有立体感,动画效果非常细腻,背景音乐也配合得恰到好处。

 

  1. 体验上,上传了几张照片,感觉区别不是特别明显,那个…也有可能是因为小五上传的照片,全是已经P过的吧…不过,如果照片的显示区域如果稍微大一点,对比应该就会能显得更明显一些。除此之外,小五个人对“存在感缺失症”画面中的那些眼睛,有点抵触,感觉很渗人,不知道看官们有何感受?不过总体上,无论是从画面表现,视频动画效果,功能的实现,和音乐的选择等多种方面来看,已经是一个很棒很精致的H5了。



技术实现: Video(视频) + CreateJS + jQuery + HammarJS + iScroll


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

识别图中二维码

全球首家自拍治愈馆开张-查阅二维码




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

标签

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

相关推荐:

天猫 Tmall:天猫扭蛋机

【618】H5案例大汇总(干货精选)——2017大合集第28波

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~