.

3.《来了就是深圳人》横屏H5教程

伯益发表于:2017年03月31日 15:26:30更新于:2020年12月22日 11:59:47

视频教程

一、案例效果


0015dd7734b5c6d96e5be7819313b28

《【优秀作品奖】来了就是深圳人》


二、应用场景

在横屏H5案例 “来了就是深圳人”中,“只做设计”李志用了一个很有创意的方式,这里分享给大家有关横屏H5和锚点触发的设置方法。

知识点:横屏、layer容器、锚点


三、功能设置

文末附件下载素材,非商用,仅供学习使用。


1.我们新建作品,在右面面板作品信息图标下自定义尺寸,宽为740,高为340;

image.png


2.我们切换到layer页面,更改layer页面尺寸为宽941,高为1289,接着上传图片,提示的背景图手动设置尺寸与layer尺寸一致,摆放好位置如图示;

image.png


3.再新建一个layer页面,高度为400,宽度不固定,根据自己的内容来

image.png


4.在layer里给想要出现的文字或者图片添加飞入等待触发动画,再添加锚点,设置触发基准点为视窗左边线,触发条件为向左滚动接触时,仅执行一次;

image.png


5.切换到页面,把提示layer插入到页面中去。

image.png

拉伸到原尺寸大小(941,1289),并摆放好合适的位置

image.png


6.再添加内容layer到页面中去,高度为400,宽度为740,并摆放好合适的位置;

0015fe16da78288cc62421443b13355

7.预览下效果试试,在向左滑动到我们预想的位置上,文字就出现,其他锚点的操作是一样的。

0015fe16e1c042e523ca183c319fbe7


8.小技巧:

1.layer的高度建议是400,过小的上下可能会露白边;

2.按住键盘上的空格键同时点鼠标左键可以拖拽画布。



附件:横屏案例素材.zip • 2.93MB • 下载

回复(6)