爱卡汽车：2017XMEETING车迷大会

2017-11-09 H5案例分享 H5案例分享

案例：2017XMEETING车迷大会

出品：爱卡汽车

亮点：

策划上，重力感应3D全景类，① loading结束，超跑、电音，混合狂欢尖叫响起，体现了速度与激情的极致融合，并以“你想知道这是来自哪个世界的声音”来勾起人们的好奇心，引导大家去探索；② 点击去探索，3D场景以旋转画卷的方式从远及近席卷而来，而后可360°旋转手机或左右滑动屏幕观赏浏览真个3D场景，里面各式车辆多种多样，并在各处散布了十一个按钮，点击不同个按钮即可了解2017XMEETING车迷大会相应的活动详情。
设计上，炫酷风格。① loading页面，进度条随着加载进度的增加，彩色进度条从左到右依次充满整个进度条区域。② 首页以黑色作为主色调，里面的文案动效有种在极快速度下的视觉差效应，再配上动感激情的超跑、电音等混合背景音，有种振奋人心的神秘之感。③ 3D场景主要以陆地、浮岛和各类车辆等元素组成，色彩主要以绿色、粉蓝色为主，清新自然，充满生机。
技术上，首页动画主要采用JS序列图来实现的；重力感应3D全景图的实现主要用的是css3d-engine + orienter.js。

技术实现： jQuery + css3d-engine + orienter.js

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

识别图中二维码

2017XMEETING车迷大会-查阅二维码

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

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

标签