天猫:比天气更热的是?

2018-06-11 H5案例分享 H5案例分享
天猫:比天气更热的是?


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

识别图中二维码

比天气更热的是?-查阅二维码

完整欣赏此案例大约需要1分25秒


案例:比天气更热的是?

出品:天猫

亮点:

  1. 策划上,视频类,这是对天猫618 理想生活狂欢季的宣传,视频全长1分18秒。加载完成后,点击“开始”按钮,播放视频,视频有三个主角,点击页面的“跟着节奏 切换主角”按钮,切换到另一主角的视频画面,这三个主角看似毫无关联,但随着视频情节的发展,为用户揭晓了答案,回答了本H5“比天气更热的是?”问题,“趁热·造热”。画面依次展示了“激情”、“活力”、“态度”、“勇气”、“信念”、“决心”、“热爱”、“理想”以及“生活”九个关键词,表达了天猫618理想生活狂欢季的宣传要点,视频结束后,显示活动的时间等信息,页面下方有一个“趁热重演”按钮,引导用户再次观看体验。
  2. 设计上,真人视频,真实感很强,搭配带感的音乐,用户体验良好;三个主角切换后的画面风格统一,没有违和感。
  3. 体验上,视频处理是这个H5 最大的亮点,三个视频的切换流畅自然,表现当下年轻人的崇尚的“趁热·造热”活法,体验不一样的风格,走出去,释放自己的青春与活力,带给用户动感与活力。



技术实现: howler.js+vue.js+video



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

标签

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

相关推荐:

天猫:奇妙的闺蜜化学反应

天猫:高级剁手党全国统一考试

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~