北京奔驰：成就人生主角
案例：成就人生主角
出品：北京奔驰
亮点：
- 策划上，动画展示+全景类。梅赛德斯奔驰C级车宣传H5。Loading完毕一进来便引导用户“当你觉得生活需要些改变，那就画出一个C吧…”，提示用户在屏幕上画”C”，后续也会有若干次画C，每次画完之后会展示与C形状相关的动画，并出现对车内相应设施及功能的介绍。结尾页可以点击“查看内饰”来旋转手机观看车内全景，可以点击“了解更多”来查看更详细的相关信息，还可以“申请试驾”。
- 设计上，矢量风格，动画部分色调偏暗，音乐选用了钢琴纯音乐，整体给人安静唯美的感觉，将轿车这个元素的以清新淡雅的风格展示出来。全景展示部分也非常流畅，画面也很清晰。
- 技术上，动画部分用序列帧图片来实现，全景展示部分用到了krpano，触摸交互用到了Swiper手势库，还用到CreateJS来做图片与音乐的预加载。
- 体验上，感觉案例内容很丰富，动画、交互、图文展示、全景展示，画面看上去也很舒服。鸡蛋里挑点骨头，小编认为，动画展示部分，如果每个不同的场景都有相应的音效，呢么代入感可能会更好。其次从展示部分到结尾页的过度，音乐风格的突变显得略微有点突兀。
技术实现： TweenMax(动画框架) + jQuery + Krpano + pixi.js + CreateJS + Swiper
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
