h5 制作教程免费 怎么做特别牛的720°全景H5？
怎么做特别牛的720°全景H5？
制作全景图的效果并不复杂。我们只需要借助:1的背景素材图，根据需要添加即可。
一、案例效果演示
二、组件结构
全景容器组件:我们简单地将其结构分为三个层次结构:
1.最外面的元素/背景
2.中间层元素/背景
3.最里面的元素(交互元素放置层，缩写为交互层)
最外层元素/背景由全景容器组件的最外层图片元素层组成，在手机上看离我们视线最远；
中间层元素/背景由全景容器组件的中间层中的图片元素层组成。在手机上看，比最外面的背景更接近视线，介于最里层和最外层之间。
最里面的元素，在手机上看，比最外面的背景离视线最近；一般我们用一个图层页面来做这一层，可以在这一层做一些交互的触发设置。
可以用最外面的背景(2:1)作为全景容器本身的背景，中间的背景(2:1)，或者直接用页面作为全景容器的背景(普通全屏尺寸740X1136分辨率72dpi或者加画布)。
提示:在层间滑动屏幕时，会出现错位的视觉差异效果。做的层数越多，视觉差异效果就越丰富。
三、应用场景
全景容器组件，可以连接长宽比为2:1的图片，以Y轴为中轴，旋转360。目前有该组件的案例供大家参考。
《这些声音你听过吗？》
《乌兰察布第二届冰雪艺术节》
三、材料准备
下载文末附件中的素材，不用于商业用途，仅供学习。
1.如果要让最外面的背景可见，中间的背景不能是JPG格式，可以是PNG格式的图片，有透明区域；另外，大小比例为2:1的JPG格式大图不能放在图层中。
2.相关尺寸规格。默认大背景尺寸比例为2:1( 2000 x 1000 px分辨率72dpi)，其他所有小元素在PS中设计后逐一导出。注意:PNG格式的图像被裁剪掉不必要的透明区域。大图尺寸比较大，但是要尽量控制和压缩。
3.在PS等设计软件中完成所有元素或大图。在PS等设计软件中设计排版元素后，逐个导出PNG或JPG，然后上传到:1)导出为单独的图层，放在中间的背景或者图层图层中，看个人需求。
四、组件教程
基本用法
1.添加全景容器组件:高级组件-交互组件-全景容器。
2.单击Panorama容器以添加组件。
3.点击【使用中间背景图片】和【使用外部背景图片】的缩略图，将图片替换为2:1 (2000 x 1000 px分辨率72dpi)的大小比例，两个背景图层可以不设置。
4.点击上图中任意一层背景图片，显示素材上传界面，仅支持上传JPG/PNG格式的图片。
4.双击图层设置直接切换到图层页面添加或修改材质。
5.点击进入图层中的排版效果如图。点击左上角的黑色小三角，切换回页面。
交互式图层设置。用户最关心的是全景容器中的交互设置，一般主要在层(最内层)进行。
h5制作完成后怎么发给别人？
使用we制作H5后，点击右上角的发布，就已经发布了。公众平台:
1.将链接设置为关键词回复或自动回复的内容，或者设置为自定义菜单。
2.可以在图形消息的原文中插入H5链接，用户可以通过点击原文直接进入H5页面。空间:直接复制链接发布就行了。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
