纪念碑谷+QQ音乐:纪念碑谷2音乐盒

2017-10-24 H5案例分享 H5案例分享
纪念碑谷+QQ音乐:纪念碑谷2音乐盒

案例:纪念碑谷2音乐盒

出品:纪念碑谷+QQ音乐

亮点:

  1. 策划上,视频动画+音乐欣赏。进入案例,随着主角踩着块儿走进碑里,画面会变为一个音乐盒。画面中有七个砖块,点击砖块,人物会移动到上面,背景的音乐盒风格也会变化,每个砖块对应一个音乐盒,而每个音乐盒中有3~4首纪念碑谷的音乐,点击屏幕下方的“播放”按钮就可以播放音乐,向上滑动屏幕可以查看当前音乐盒的音乐列表,并可以点击切换音乐,点击此页的“喜欢”按钮或音乐盒页右上方的按钮,可将音乐标记为喜欢。

 

  1. 设计上,原版纪念碑谷的画面、主题配色及原声音乐,依旧给人“随手一截屏就可以当壁纸”的感觉。控制主人公踩不同的砖块,画面会在保持镜头不切换的前提下,渐渐过渡到相应的主题。

 

  1. 体验上,跟游戏本身一样,非常沁人心脾,适合放松的时候体验,会让人不由赞叹音乐的美好。不过小五觉得,有一些体验上可改进之处,就是点击砖块后人物的移动动效,不够连贯,给人一顿一顿的感觉,尤其是跨几个砖块的点击,要等很长时间才能等到角色移动到目的地,并且音乐盒名的切换也有点慢。其次开头部分提示用户点击砖块的提示语,不是很明显,小五觉得可以稍作停留,不然一不留神提示语就消失了,就不知道该怎么交互。



技术实现: Zepto + Video



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

识别图中二维码

纪念碑谷2音乐盒-查阅二维码

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



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

标签

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

相关推荐:

天猫:天猫理想狂欢节

纪念碑谷2:心世界的旅程

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~