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

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

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

01.新建作品

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

02.画布设置

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

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

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

03.上传素材

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

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

04.添加图片/排版

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

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

05.去掉背景色

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

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

06设置第三层背景

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

右侧面板设置页面背景色（#1244C3）

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

07设置视差

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

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

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

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

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

08预览发布

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

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

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