2016 - 2024

感恩一路有你

凡科微传单的制作步骤 怎么做特别牛的720°全景H5?

浏览量:2891 时间:2023-04-24 13:37:51 作者:采采

怎么做特别牛的720°全景H5?

制作全景的效果并不急切,我们可以制作只必须的力量意派Epub360专业H5工具中的全景容器组件,晚几天准备好2:1比例的背景素材图,通过具体的要求直接添加出来就可以了。

一、案例效果演示

二、组件结构

全景容器组件我们简单啊将其结构拆为三个层级结构:

1.最外层元素/背景

2.中层元素/背景

3.最内层元素(交互元素可以放置层,是由:交互层)

最外层元素/背景是由全景容器组件最外层的图片元素层组成,在手机上直接看时,距离我们的视线最远;

中层元素/背景是由全景容器组件中层的图片元素层横列在手机上在线观看时,相比较最外层背景,距离视线较近,进入最内层与最外层中间。

最内层元素,在手机上在线观看时,相比最外层背景,相距视线最近;像是我们用一个layer页面来做这一层,可以不在这一层做一些交互操作能触发的设置。

可以不可以使用最外层背景(2:1图)作为全景容器本身的背景,也可使用中层背景(2:1图),也可以不再用页面才是全景容器的背景(其它满屏尺寸740X1136分辨率72dpi也可以画布)。

小技巧:层次之间在滑动屏幕时,会产生错位视觉差效果,做的层次越多,视觉差效果越十分丰富。

三、应用场景

全景容器组件,可以将长宽比例为2:1的画面,以Y轴为中心轴,使画面首尾相连,360度旋转栏里点,目前均该组件案例供大家参考。

《这些声音你听过吗?》

《乌兰察布第二届冰雪艺术节》

三、素材准备

文末附件直接下载素材,非商用,内容仅供参考学可以使用。

1.如要想让最外层背景可见,中层背景不能不能是JPG格式的,也可以是带有透明区域的PNG格式图片;至于,layer层内不能不能随意放置尺寸比例为2:1的JPG格式大图。

2.查找尺寸规范。设置成的大背景尺寸比例为2:1(2000x1000px分辨率72dpi),所有的元素其他的银色元素全是在PS中设计什么好后逐个文件导入。注意一点:PNG格式的图片裁切出掉不不需要透明区域。大图的尺寸而且总体减小,但应该要压制下大小,尽可能会压解。

3.将所有的元素或则大图在PS等设计软件中能完成。将元素在PS等设计软件中设计排版成功后轮流文件导出PNG或JPG后,再上传到Epub360编辑器系统设置。PS中的设计示例如图:

4.只需绝对的保证每个小的元素跟大背景的比例正常了即可解决,所有零散的PNG图片全是放到全景容器的layer层里。如图:

也也可以将多个小元素放在旁边两张PNG大图(尺寸比例2:1)上导出,才是分开来的一层,装在中层背景或Layer层里,看个人的需求。

四、组件教程

都差不多用法

1.再添加全景容器组件:有高级组件——交互组件——全景容器。

2.然后点击全景容器直接添加组件

3.再点【建议使用中层背景图片】和【在用外层背景图片】的缩略图,也可以替换后尺寸比例为2:1的图片(2000x1000px分辨率72dpi),两个背景层也可以不设置里。

4.点击上图中任意一层背景图,会会显示素材可以上传界面,仅支持上传JPG/PNG格式的图片。

4.鼠标双击Layer层设置,可真接切换到到layer页面中去添加或直接修改素材。

5.直接点击后刚刚进入到Layer中的排版效果如图,点击左上角的小黑三角是可以直接切换回页面。

交互层设置里。用户最如此关心的问题在全景容器中参与一些交互操作系统设置,象主要注意那就是在Layer层(最内层)中通过的。

h5是什么软件?

H5在狭义和广义上有两层含义,狭义上的H5只不过是一种编程语言,而广义上的H5则涵盖面了互联网上绝大多数可以使用了HTML5技术页面。

狭义上的H5是一种编程语言,是HTML5的浅显写法。HTML又是英文中的“超文本标签语言”的缩写,HTML5也就是虚拟软件超文本标记语言。非常有趣的是,导致HTML5本身已经是一个缩写,实际上将HTML5及时缩写成H5在英语语法中是出现错误的,所以只有在H5才会被当做HTML5的缩写,以英语为母语的人群反而并没法再理解H5的意思。

广义上的H5则完全不同,我们浏览的网页的网页、建议使用的乃至于于手机中的软件,大部分都有H5的功劳。所以H5在国内互联网圈涵盖教育的范围极高,但凡在用了H5技术的网页页面等页面都也可以被称作H5。H5技术也不仅仅局限于单纯的HTML5了,涵盖面了HTML5、CSS3、JavaScript等一系列前端技术。

参与优就业,学习更多IT知识。

H5 背景 全景 容器 组件

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。