H5两大炫酷玩法教程——全景+幻灯片

风靡营销圈的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大神~