网易乐得技术团队

新版h5maker,教你如何h5制作立体场景(一)

h5maker:基于canvas实现的制作单页h5滚屏页面的工具,可以让非前端人员通过拖拽,导入psd等操作,很容易的制作出流畅的滚屏页面。
新版h5maker:基于webgl,比canvas更加稳定流畅,增加了3d的属性,更加的立体化,场景化,使用户的代入感更强烈。

工具地址:http://nfop.ms.netease.com/open/h5Maker
旧版使用说明书:http://nfop.ms.netease.com/open/h5Maker/help

将单调的h5滚屏页面升级为立体感超强的3d场景

如下坐标轴所示:在平面坐标轴x,y轴的基础上增加了z轴,构成三维立体空间。

可编辑元素的z轴默认值为0,可以设置为正负整数(-550到550之间)。当选中元素的z轴设置为相应的数值,此页面就会拥有3d的效果:

总结一下新版h5maker的工作流

1、 psd导入生成模板,一个psd生成一页(psd分层如下图,图层里尽量去掉空白区域,或者上传图片拖拽操作)

2、设置相应的z轴,如有动画可以设置简单动画
3、设置loading图片(loading图片的大小为256x256,如果为长方形可用透明代替,如下图),页码颜色,如有背景音乐上传背景音乐


4、选中想要的切换效果,预览

5、设置分享文案,图标,发布目录,发布在线得到地址


三种webgl的基本效果解析(一镜到底和柱状全景后边会单独介绍)

1、竖向滚动

2、横向滚动

3、宇宙漫游

这种效果使用了深景,需要给首页背景添加雾化颜色,颜色的色值与背景图片中心部分的颜色一致或相近就好:

第一页背景设置的时候会有一个选项:是否设置为单一背景
如果所有页面的背景为同一背景,强烈建议设置为单一背景,这样只会加载第一页的背景图片,提升加载页面的时间和效率。


点击触发

新版h5maker在原来的点击跳转,点击下载,点击分享,之外增加了点击弹层。

如下图,上传一张弹层图片,编号为图片1-10:

在想要触发点击的按钮上设置跳转链接与上图的编号一致为#1-10:

得到如下效果,关闭按钮默认在右上角:


总结

以上只介绍了新版h5maker的基础用法,还有很多的奇妙效果会陆续介绍
上述例子的模板链接为:https://fa.163.com/nfop/h5/zhibo_0718/index.htm
感兴趣的同学可以导入到工具中,自行摸索。

相关文章:
新版h5maker,教你如何h5制作立体场景(二)
新版h5maker,教你如何h5制作立体场景(三)