.

招聘H5页面怎么做?

伯益发表于:2020年04月02日 14:34:32更新于:2020年04月02日 14:36:52

大家可能经常遇到这样的情况,自己明明只是一个设计师,但被老板要求制作H5,比如邀请函、招聘、年会等不同类型。

这不招聘季又来了,今天我们以意派Epub360为例,介绍制作视差效果的招聘H5页面的方法。

意派Epub360官网地址:https://www.epub360.com/


       N2TKfglJzj0vErnZ.jpg!thumbnail      

01.新建作品

进入工作台,点击左上角的“+”,创建第一个作品

       4elfd6d9znM2UCEC.png!thumbnail      

02.画布设置

在打开的新窗口编辑器上,右侧面板更改页面尺寸为“微信plus”

       yK1oVvBnJfsQ1S1e.png!thumbnail      

接着,点击左上角切换到layer层,默认有一个layer页面(作为第一层背景),页面名称命名为“第一层背景”,右侧面板更改页面尺寸宽为375px,高为3200px,随便设置背景色,这里设置颜色是方便编辑

       RCc2z3WZGtUnUMUh.png!thumbnail      

 然后,我们在左侧页面上右击,新建第二个layer页面(作为第层背景),页面名称命名为“第二层背景”,并设置宽375px,高2800px,这里的高并不是一个确切值,只要跟上个layer高度不一样即可形成运动速度不同,理论上相差越大,视差效果越明显 

       WqaylyYRohMkG0nj.png!thumbnail      

03.上传素材

左上角切换到页面上,点击编辑界面上面工具栏的图片组件

       4j3DRjFBSfoeIBOk.png!thumbnail      

在弹出的素材库窗口,新建一个文件夹,给它命名,在这个文件夹下,点击上传, command+A( window上是ctr+A)选中所有的元素,点击确定,或者选中多个元素拖拽上传

       UOemli6pDT8I99rh.png!thumbnail      

04.添加图片/排版

第一层背景Laye页面命名为:文字层

       4Ji4dRsBwwgrcs4R.png!thumbnail      

第二层背景 Layer页面命名为:小元素层 

       JXrJ9WVDlRQDadcA.png!thumbnail      

05.去掉背景色

 我们把两个Laye层的背景色透明度设置为0,之前设置了背景色是为了区分我们的图片元素,因为默认的白色背景和我们的白色元素很容易就混淆,不利于我们编辑排版

       q0zfy3IaCDMNvHWL.png!thumbnail      

 

设置背景色和添加一些固定的小元素

 

06设置第三层背景

 

我们点击左上角切换到页面 

       46gLjHVWuCMygGD9.png!thumbnail      

右侧面板设置页面背景色(#1244C3)

       8qsmxfNhxScKUwLN.png!thumbnail      

然后再添加一些第三层背景上元素

       3s0wqrBl1u8F383o.png!thumbnail      

07设置视差

 

解析案例,我们添加之前我们做到两层背景,点击编辑器上方的工具栏,高级组件下面选择layer容器

       x3jv3xOFbSIC9Ozr.png!thumbnail      

再弹出的容器上,依次添加小元素层、文字层到页面上(文字层要在最上方)

       Ib3CFKISbic0RVwm.png!thumbnail      

文字层和小元素层都被添加到页面上,大致如下,从文字层是可以看到下面小元素层和固定背景层

       67BlmFcXN3wFdBgb.png!thumbnail      

我们把文字层和小元素层摆放到页面正中心,点击编辑器上方工具栏高级组件添加联动组件

       eAR3pQVfJAw68xQ7.png!thumbnail      

选中联动组件,点击右侧面板“+”号,在参数面板上勾选这两个ayer容器,点击下面的对勾确定

       u4QTrsThR5IomQeA.png!thumbnail      

08预览发布

点击左上角“预览”按钮,可以预览作品效果,对不满意的效果进行细节调整

       GB5AX2xOlyEgWpwp.png!thumbnail      

点击左上角“发布”按钮,可以自定义分享到微信的标题、描述、缩略图等信息,点击保存,再点击发布按钮即可获取H5作品的二维码和链接

       9oIzYXXmp9IL5sCM.png!thumbnail      

好了,本期视差招聘H5教程就介绍完了。