最近在朋友圈、微博等等都看到了很多全景h5,很是酷炫，请问那是怎么做的啊？
大家都知道，自从H5亮相朋友圈，这几年已成为新媒体推广的标配。
今年双11，马云爸爸不仅掏空了我的钱包，更是差点亮瞎我美腻的双眸。那个《穿越宇宙的邀请函》H5，瞬间就霸屏了朋友圈。
他们都说，这是用了什么炫酷场景、VR技术，我只知道这是砸了150万元人民币的大制作。
下面小编将为大家整理工具教程
不用花一分钱，便可以做个“马云爸爸”同款炫酷H5
首先
老规则，先登录官网凡科微传单的官网，选“免费创建”&“空白模板”
有没有看到两个激动人心的字眼：全景！！！
就是它啦~~
千呼万唤始出来，此时此刻对“产经”的膜拜之情有如长江之水......滔滔不绝......（希望“产经”看到后，给我发个大红包）
有些脑瓜看到这里，可能会说模板有点少。对于这样的好宝宝，我只有一句话：功能已上线，模板还会远么？（只要多夸产经帅，该有的都会有）
我们任选一个，就“百货狂欢”吧
点“展开编辑全景”，就可以像编辑普通H5一样，在上面加上文本、图形、按钮什么的，这些很简单没什么好说的。
我要说的是，制作这种全景H5和普通H5还是有些区别滴：比如说，它得有一张长长的外圈背景：
它也得有一张长长的内圈背景：
外圈背景和内圈背景叠放起来就是这样的效果：
如果说你不是专业的设计师...
那外圈背景这些还是套用模板稳妥些~
设内外圈背景弄好之后，直接在上面加部件（类似下图这些）：
接下来是重点！！
做720°全景H5， 有一个“层级”的概念。比如上图的这些小图标，每个都可以设不同的层级，一共有10个可以选。
层级大的图标看起来比实际尺寸大。就好像现实中，我们看到远处的东西小，近处的东西大一样。
为啥要设层级？这样看起来才更有层次感、立体感。
什么意思？
这么说吧，层级3的图标会比层级6更靠近背景；反过来就是：层级6的要比层级3更靠近观看者。
还是有点懵B的脑瓜，看下图：
层级设置好了，加点击反应。比如说：点了之后跳转到外链，点了之后拨打电话、查看产品情况或是弹窗，看推广需要。
设好记得保存就搞定啦~
好奇的脑瓜可能要问如此酷炫的H5究竟是什么原理？
我用了两杯卡士酸奶换来了帅气产经的一句话：
它就是用一张长图绕着Y轴卷成一圆柱体
就变成手机看到的720°全景
突然觉得知道这些也没什么用
关键还是知道如何不花钱装（zhi) B (zuo)啊
制作全景的效果并不复杂，我们制作只需要借助 意派Epub360 专业H5工具中的全景容器组件，提前准备好2:1比例的背景素材图，按照要求添加进去就可以了。
一、案例效果演示
二、组件结构
全景容器组件我们简单将其结构拆为三个层级结构：
1.最外层元素／背景
2.中层元素／背景
3.最内层元素（交互元素放置层，简称：交互层）
最外层元素／背景是由全景容器组件最外层的图片元素层组成，在手机上观看时，距离我们的视线最远；
中层元素／背景是由全景容器组件中层的图片元素层组成在手机上观看时，相比最外层背景，距离视线较近，处于最内层与最外层中间。
最内层元素，在手机上观看时，相比最外层背景，距离视线最近；一般我们用一个layer页面来做这一层，可以在这一层做一些交互触发的设置。
可以使用最外层背景（2:1图）作为全景容器本身的背景，也可使用中层背景（2:1图），也可以直接用页面作为全景容器的背景（普通满屏尺寸740X1136分辨率72dpi或者微信PLUS画布）。
小技巧：层次之间在滑动屏幕时，会产生错位视觉差效果，做的层次越多，视觉差效果越丰富。
三、应用场景
全景容器组件，可以将长宽比例为2:1的画面，以Y轴为中心轴，使画面首尾相连，360°旋转查看，目前已有该组件案例供大家参考。
《这些声音你听过吗？》
《乌兰察布第二届冰雪艺术节》
三、素材准备
文末附件下载素材，非商用，仅供学习使用。
1.如想要让最外层背景可见，中层背景不能是JPG格式的，可以是带有透明区域的PNG格式图片；另外，layer层内不能放置尺寸比例为2:1的JPG格式大图。
2.相关尺寸规范。默认的大背景尺寸比例为2:1（ 2000 x 1000 px 分辨率72dpi），所有的元素其他的小型元素都是在PS中设计好后逐个导出。注意：PNG格式的图片裁切掉不需要透明区域。大图的尺寸因为相对较大，但还是要控制下大小，尽可能压缩。
3.将所有的元素或者大图在PS等设计软件中完成。将元素在PS等设计软件中设计排版完成后逐个导出PNG或JPG后，再上传到Epub360编辑器设置。PS中的设计示例如图：
4.只要保证每个小的元素跟大背景的比例正常即可，所有零散的PNG图片都是放在全景容器的layer层里。如图：
也可以将多个小元素放在一张PNG大图（尺寸比例2:1）上导出，作为单独的一层，放在中层背景或Layer层里，看个人的需求。
四、组件教程
基本用法
1.添加全景容器组件：高级组件——交互组件——全景容器。
2.点击全景容器添加组件
3.点击【使用中层背景图片】和【使用外层背景图片】的缩略图，可以替换尺寸比例为 2:1 的图片（ 2000 x 1000 px 分辨率72dpi），两个背景层也可以不设置。
4.点击上图中任意一层背景图，会显示素材上传界面，仅支持上传JPG／PNG格式的图片。
4.双击Layer层设置，可直接切换到layer页面中去添加或修改素材。
5.点击后进入到Layer中的排版效果如图，点击左上角的小黑三角可以切换回页面。
6.Layer交互层设置。用户最关心的问题在全景容器中进行一些交互设置，一般主要就是在Layer层（最内层）中进行的。
