天佑德•青稞酒：天佑德青稞之旅

2017-02-21 H5案例分享 H5案例分享

案例：天佑德青稞之旅

出品：天佑德•青稞酒

制作：北京鸿福天下网络科技

亮点：

策划上，3D全景类，① 打开H5，紧紧包裹住的圆柱形场景快速转动展开，形成一幅3D场景，点击场景下方的开始体验；② 以360旋转+点击互动的方式将青稞酒的产生过程由青稞播种种植→成长成熟→收割→运去天佑德原粮存贮→原粮酿造→检验检测→陶坛封存→灌装→包装→产品上市，一步一步生动想象的展现出来；③ 点击写有青稞酒产生过程的小标签，可弹出来该产生过程的详情介绍，便于用户更加方面的了解天佑德青稞酒。
设计上，手绘风格，黄黄的青稞麦田，远处的高山白云，很有田园气息，里面不同的物体景深不同，很有层次感；手绘的景象，有趣又生动。
技术上，旋转手机观看全景采用的是HTML5的重力感应；另外这种3D全景的实现采用的是JS+CSS3的transform，与淘宝造物节用的CSS3框架css3d-engine实现全景的方式原理相同。

技术实现： Zepto + TweenMax

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

识别图中二维码

天佑德青稞之旅-查阅二维码

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

标签