.

招聘H5页面怎么做?

伯益发表于:2020年04月02日 14:34:32更新于:2021年02月08日 18:07:43

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

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

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

00160210d6b1df60453280e218c25e5

01.新建作品

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

       2.png__thumbnail.jpg      

02.画布设置

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

       3.png__thumbnail.jpg      

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

     4RCc2z3WZGtUnUMUh__thumbnail.jpg       

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

       5.png__thumbnail.jpg      

03.上传素材

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

       6.png__thumbnail.jpg      

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

       7.png__thumbnail.jpg      

04.添加图片/排版

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

       8.png__thumbnail.jpg      

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

       9.png__thumbnail.jpg      

05.去掉背景色

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

       10.png__thumbnail.jpg      

 

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

 

06设置第三层背景

 

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

11gLjHVWuCMygGD9__thumbnail.jpg             

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

       12qsmxfNhxScKUwLN__thumbnail.jpg      

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

       13.png.jpg      

07设置视差

 

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

       14.png.jpg      

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

15.png__thumbnail.jpg

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

       16.png__thumbnail.jpg      

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

       17.png__thumbnail.jpg      

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

18.png__thumbnail.jpg  

08预览发布

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

       19.png__thumbnail.jpg      

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

       20.png__thumbnail.jpg      

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