Brookstone 博克斯通:穿越乐世界

2017-08-29 H5案例分享 H5案例分享
Brookstone 博克斯通:穿越乐世界

案例:穿越乐世界

出品:Brookstone 博克斯通

亮点:

  1. 策划上,交互视频类H5,横屏观看。进入案例点击按钮,画面出现一位帅气小哥哥,将手机向不同方向晃动能进入不同的主题,向左晃动选择“一起去泳池派对吗”,向右晃动选择“走,跟我搞事情去”。

向右晃动,进入一个会议室场景,场景中有两拨人,正因为策划方案的事情争执不休,男主劝和失败,于是拿出手机,同时画面提示用户选择故事走向,可以让原本争吵的二人开始弹奏乐曲,或是进行说唱 battle。结尾还有一个清洁工小彩蛋。

向左晃动,男主会进入泳池派对,此部分是720°的全景视频,用户可以上下左右转动手机,即通过手机自身陀螺仪,观看视频。泳池派对分为几个视频,须通过用户点击屏幕来过渡。

 

  1. 设计上,均为真人拍摄。会议室部分,黑色大背景,突出会议本身。用户如果选择弹奏乐曲,画面会变为山水场景,并且产品会嵌入画面中,二人漂浮于音响之上,云雾环绕,山水风画面,悠扬的琵琶+二胡背景乐,和科技感十足的产品相互碰撞,产生了强烈的视觉反差;若选择搞事情,背景依旧是黑色,产品音响会变成舞台,二人化身 Rapper,在音响之上进行说唱 battle,歌词充满火药味儿,编曲也同样动感十足,一个回合之后,灯光打开,画面变亮,气氛升级,更加激情四射。

无论选择哪个,最后都会穿越回会议室,留下非常喜感的结尾,同时突出“穿越乐世界”的主题。

泳池派对也是H5的最大亮点之一,全景+VR的视频让用户仿佛身临其境。场景中,男主点击音响上的按钮,乐队便出现在身边,在渲染狂欢气氛的同时,又表现出音响的音质和音乐还原效果很棒。用户在这部分停留时间,恐怕会很长呢哈哈哈,对,说的就是你,快擦擦口水吧!

 

  1. 体验上,感觉交互形式非常丰富,除了点击选择选项,还有重力感应晃动手机、全景+VR视频,视频除了旋转手机,还能滑动屏幕查看,这些交互让H5提升了用户的参与感。同时,案例很好地突出了“穿越”和“乐世界”,将故事和产品本身也很好地结合在一起。

案例还将产品的功能也无痕地融入其中,比如泳池派对,暗含着产品本身的防溅水性能,再比如会议室场景中,男主点击手机屏幕按键时,两道光束射向两台音响,这个镜头表现出了产品的 Pair2 技术......总而言之,是一个互动性很强又蛮有趣的H5。



技术实现: Krpano + PreloadJS + jQuery



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

识别图中二维码

穿越乐世界-查阅二维码




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

标签

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

相关推荐:

【全景类】H5案例大汇总(干货精选)——2017大合集第11波

网易新闻:泳池大乱斗

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~