力帆轩朗：平凡之路，非凡生活

2017-04-10 H5案例分享 H5案例分享

案例：平凡之路，非凡生活

出品：力帆轩朗

亮点：

策划上，视频+3D全景类，① 点击“一键启动开始体验”打开视频，线条飞入，激情澎湃，力帆轩朗飞驰而来；② 视频结束，力帆轩朗来到面前，出现slogan：平凡之路，非凡生活；③ 上滑来到下一页，点击“进去看看”，进入到力帆轩朗车内，而后可720度滑动看车内全景，点击车内的红色小按钮，即可看到该汽车部件的简介，左右滑动可看到更多介绍；④ 然后选择出去看看，填写个人信息，即可进行预约试驾。
设计上，时尚风格，采用红色作为主色调，主要以繁华的城市夜景作为背景，按钮等多采用水晶透明风格，再配上力帆轩朗汽车，很精致精美。
技术上，① 视频主要是采用Html5带有x-webkit-airplay，webkit-playsinline，playsinline，x5-video-player-type，x5-video-player-fullscreen等属性的Video来实现的；② 滑屏时采用JS滑屏组件Swiper来实现的；② 车内3D全景是用Pano2VR（全景图转换器）做的。
体验上，① 如果用户在播视频之前就将背景音关了，但是视频播放完毕，背景音由自动开始播放了，如果能监测到用户在视频播放之前是否对背景音由操作，在视频播放完毕后，根据用户的选择进行背景音状态的设置就更好了，这点可以用技术实现；② 车内3D全景在安卓下滑屏观看时，总是时不时的黑屏，这点体验也很不好啊。

技术实现： jQuery + Swiper + Pano2VR(全景图转换器)

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

识别图中二维码

平凡之路，非凡生活-查阅二维码

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

标签