杜蕾斯Durex:sexy in the AiR

2017-06-09 H5案例分享 H5案例分享
杜蕾斯Durex:sexy in the AiR

案例:sexy in the AiR

出品:杜蕾斯Durex

亮点:

  1. 策划上,视频+图片合成。进入页面,点击屏幕中间的“Play”开始视频部分。视频画面是几位不同领域的KOL,在拍杜蕾斯的性感主题时尚平面,并有背景旁白配音,分别阐述他们自己对“性感”的理解。视频可以选择跳过。视频结束后,点击按钮上传照片,进入图片合成页,在页面中可以拖动装饰标签和主题语的位置,点击填空部分可以填写文字,还能切换文字配色。点击OK按钮,经过短暂的loading后,图片合成完毕,可以长按保存。结尾页可以点击购买跳转京东超市,或“Share your sexy”给好友。

 

  1. 设计上,视频部分真人拍摄,画面是在人物在拍摄海报,摆造型时的动态画面,声音则是画外音的形式,时尚风格,性感主题,画面与内容结合得很不错。图片合成部分有固定的一个装饰标签,另外一个是文字,可以输入内容,接着根据需要切换黑白配色。生成DIY海报的同时会在画面中印上一个二维码,别人看到海报也想玩的话,就能长按识别并开始创作了

 

  1. 体验上,此案例的“跳过视频”跟以往的不太一样,不是真正意义上的跳过,而是在画面中加了一层遮罩,并出现图片合成部分的按钮,视频还是会在遮罩层后面播放着,画面一直是处于动态,这样给人的感觉很有活力。不想真的跳过视频,还能点击除了按钮以外任何地方,隐藏遮罩和按钮,并继续看视频,非常的人性化。



技术实现: Video视频 + Canvas


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

识别图中二维码

sexy in the AiR-查阅二维码




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

标签

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

相关推荐:

杜蕾斯 :欢迎来到杜蕾斯试戴室

【杜蕾斯】H5案例大汇总(干货精选)——2015大合集第七波

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~