有道云笔记：360°全景星际探索之旅

2016-09-05 H5案例分享 H5案例分享

案例：360°全景星际探索之旅

出品：有道云笔记

亮点：

策划上，① 将手机屏幕竖屏锁定，然后横置手机，由舰桥图标看到舰桥正在驶来，而后选择是否进入舰桥；② 点击“YES”计入到舰桥内部，可360度移动手机或者滑动屏幕查看舰桥内景；③ 几秒后舰桥进取号突然遭遇袭击，为保护航行所取成果，快速将航行日志传送至有道云笔记；④ 日志传送结束，进入到尾页，发现原来是宣传有道云笔记和电影星际迷航3，进入有道云笔记还可抢免费电影票哦
设计上，科幻风格，采用神秘清冷的蓝色作为主色调，舰桥进取号遭遇袭击的画面很有科技大片之感
技术上，① 360度移动手机采用的是HTML5的重力感应；② 舰桥进取号遭遇袭击，上传航海日志至有道云笔记的炫酷画面在iOS下采用的是Canvas，但在Android下采用的是Video视频

技术实现： jQuery + krpano

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

识别图中二维码

360°全景星际探索之旅-查阅二维码

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

标签