风靡营销圈的H5不仅是单纯的展示工具,几乎所有品牌都在利用H5技术,通过大量视觉丰富、耀眼的小互动、小游戏,期待病毒式传播。(威廉莎士比亚,美国作家)。

甚至连咱公司的HR都收到了H5的简历(难道是专门为了投咱iH5做哒?),虽然是那种看起来直接翻页的劈劈踢(PPT),但是应聘小哥直接甩个二维码过来的自我推荐方式,还是要大大的点个赞。

然鹅,对于闯遍大江南北的小伍来说,这么简单的翻页效果怎么能入的了我的法眼呢?身为一个不玩代码的H5资深从(chou)业(biao)者(lian),怎么能不教给大家一些炫酷有效(5分钟内完成)的玩法呢?

No.1——全景背景玩法

淘宝花费30万打造的720°全景造物节记得不?

你想玩吗?教大家利用iH5的全景工具来造一个,过程简单的可怕,只有三步:

(1)准备背景图素材图&物体图

A、第一张首尾相连的图作为背景图(即上面图片左右两边是可以连接起来的);

B、建议宽高比2:1;宽在2000 px ~ 3500 px之间,显示效果比较好;

(2)Photoshop切图

在PS中把图片竖切成N份,导出。

A、建议切图份数在20~30之间;份数越多,三维效果就越平滑,但整个场景也会随着图片的变大而变卡;

B、导出后不用做任何编辑,ps童鞋已经帮我们排好了图片顺序;

C、为了避免最后的全景空间有白色缝隙:使用Photoshop切图时,图片宽度是A px,切片份数是B 份,切后的小图C的宽必须是整数。目的是保证所有小图的宽都是等份的整数。

(3)利用iH5设置全景

【1】在 i ,新建案例,创建全景容器,设置全景容器的位置及大小(本案例中设置了与舞台同宽高):

添加2个全景背景组:

【2】分别把切好的40张图片拖拽到2个全景背景组里;(同一层的图片切片放在一个背景组里,平台会根据原图片的宽度自动排列,宽度越大,越在最外层)。

【3】iH5的全景工具会自动创造一个圆柱形的世界,我们“站”在圆柱形的中央看这个世界,接下来开始调整我们所“站”的位置视角

【4】调整全景容器属性面板:初始观察位置、初始水平转角、当前观察位置、当前水平转角等属性。

属性说明:

最大上/下仰角:屏幕可向下/上查看的角度,如果没有设置顶图和底图,可选择为0;

最大向左/右转角:可以设置可看视角只为360°视角中的一部分,多用于背景不是首尾相连的图片;(此案例中不涉及)

初始观察点位置 / 当前观察点位置:即观察视角的位置,可根据自己的案例进行调整。

初始水平转角 / 当前水平转角:调节进入画面时的视角位置。

参数调整之后,预览实现如图效果:

对于初始小白来说,短短几分钟就可以实现全景背景效果,作为一种展示方法,是不是还有那么一点炫的?一起来试试?

(以上制作素材版权归淘宝所有,仅供学习交流使用,如有侵权请联系liruomeng@i,经过核实后我们将做删文处理)

No.2幻灯片式玩法

身为一个底层 设计 / 运营,被一个“要求高”的领导要求去做动态展示页面,拒绝的话你敢说出去吗?!……小伍老师帮你搞定!在这儿就给大家讲一个简单不累的翻页效果~

步骤:

【1】按顺序命名图片,压缩zip文档,如01、02(压缩包中图片不能包含中文字);

【2】新建作品,创建设备,在设备下添加页面;

【3】在页面下添加幻灯片,上传压缩过的zip文档;

【4】设置幻灯片属性

坐标xy和宽高,设置滑动方向、翻页效果、循环播放,选择自己喜欢的翻页效果。

【5】添加圆点图片

1>新建一个透明按钮,在透明按钮下放4个圆形;

2>复制透明按钮,并给四个圆形添加同一颜色,使上下两层圆形重合;

3>为幻灯片添加事件,分别是播放进度1时,蓝点1隐藏同层控件;播放进度2时,蓝点2隐藏同层控件,以此类推;

4>根据需要,将蓝点1前面的方框勾选(初始可见),其余蓝点不够选(初始不可见)

这样,不一样的翻页H5效果就做好啦~是不是不会代码也可以搞定了呢?

微信关注“iH5学院”,跟我们一起“零”代码从小白到H5大神~

1.《H5两大炫酷玩法教程——全景+幻灯片》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《H5两大炫酷玩法教程——全景+幻灯片》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/gl/3075921.html