風(fēng)靡營(yíng)銷圈的H5不僅是單純的展示工具，幾乎所有品牌都在利用H5技術(shù)，通過(guò)大量視覺豐富、耀眼的小互動(dòng)、小游戲，期待病毒式傳播。(威廉莎士比亞，美國(guó)作家)。

甚至連咱公司的HR都收到了H5的簡(jiǎn)歷（難道是專門為了投咱iH5做噠？），雖然是那種看起來(lái)直接翻頁(yè)的劈劈踢（PPT），但是應(yīng)聘小哥直接甩個(gè)二維碼過(guò)來(lái)的自我推薦方式，還是要大大的點(diǎn)個(gè)贊。

然鵝，對(duì)于闖遍大江南北的小伍來(lái)說(shuō)，這么簡(jiǎn)單的翻頁(yè)效果怎么能入的了我的法眼呢？身為一個(gè)不玩代碼的H5資深從（chou）業(yè)（biao）者（lian），怎么能不教給大家一些炫酷有效（5分鐘內(nèi)完成）的玩法呢？

No.1——全景背景玩法

淘寶花費(fèi)30萬(wàn)打造的720°全景造物節(jié)記得不？

你想玩嗎？教大家利用iH5的全景工具來(lái)造一個(gè)，過(guò)程簡(jiǎn)單的可怕，只有三步：

（1）準(zhǔn)備背景圖素材圖&物體圖

A、第一張首尾相連的圖作為背景圖（即上面圖片左右兩邊是可以連接起來(lái)的）；

B、建議寬高比2:1；寬在2000 px ~ 3500 px之間，顯示效果比較好；

（2）Photoshop切圖

在PS中把圖片豎切成N份，導(dǎo)出。

A、建議切圖份數(shù)在20~30之間；份數(shù)越多，三維效果就越平滑，但整個(gè)場(chǎng)景也會(huì)隨著圖片的變大而變卡；

B、導(dǎo)出后不用做任何編輯，ps童鞋已經(jīng)幫我們排好了圖片順序；

C、為了避免最后的全景空間有白色縫隙：使用Photoshop切圖時(shí)，圖片寬度是A px，切片份數(shù)是B 份，切后的小圖C的寬必須是整數(shù)。目的是保證所有小圖的寬都是等份的整數(shù)。

（3）利用iH5設(shè)置全景

【1】在 i ，新建案例，創(chuàng)建全景容器，設(shè)置全景容器的位置及大小（本案例中設(shè)置了與舞臺(tái)同寬高）：

添加2個(gè)全景背景組：

【2】分別把切好的40張圖片拖拽到2個(gè)全景背景組里；（同一層的圖片切片放在一個(gè)背景組里，平臺(tái)會(huì)根據(jù)原圖片的寬度自動(dòng)排列，寬度越大，越在最外層）。

【3】iH5的全景工具會(huì)自動(dòng)創(chuàng)造一個(gè)圓柱形的世界，我們“站”在圓柱形的中央看這個(gè)世界，接下來(lái)開始調(diào)整我們所“站”的位置視角

【4】調(diào)整全景容器屬性面板：初始觀察位置、初始水平轉(zhuǎn)角、當(dāng)前觀察位置、當(dāng)前水平轉(zhuǎn)角等屬性。

屬性說(shuō)明：

最大上/下仰角：屏幕可向下/上查看的角度，如果沒有設(shè)置頂圖和底圖，可選擇為0；

最大向左/右轉(zhuǎn)角:可以設(shè)置可看視角只為360°視角中的一部分，多用于背景不是首尾相連的圖片；（此案例中不涉及）

初始觀察點(diǎn)位置 / 當(dāng)前觀察點(diǎn)位置：即觀察視角的位置，可根據(jù)自己的案例進(jìn)行調(diào)整。

初始水平轉(zhuǎn)角 / 當(dāng)前水平轉(zhuǎn)角：調(diào)節(jié)進(jìn)入畫面時(shí)的視角位置。

參數(shù)調(diào)整之后，預(yù)覽實(shí)現(xiàn)如圖效果：

對(duì)于初始小白來(lái)說(shuō)，短短幾分鐘就可以實(shí)現(xiàn)全景背景效果，作為一種展示方法，是不是還有那么一點(diǎn)炫的？一起來(lái)試試？

（以上制作素材版權(quán)歸淘寶所有，僅供學(xué)習(xí)交流使用，如有侵權(quán)請(qǐng)聯(lián)系liruomeng@i，經(jīng)過(guò)核實(shí)后我們將做刪文處理）

No.2幻燈片式玩法

身為一個(gè)底層 設(shè)計(jì) / 運(yùn)營(yíng)，被一個(gè)“要求高”的領(lǐng)導(dǎo)要求去做動(dòng)態(tài)展示頁(yè)面，拒絕的話你敢說(shuō)出去嗎？！……小伍老師幫你搞定！在這兒就給大家講一個(gè)簡(jiǎn)單不累的翻頁(yè)效果~

步驟：

【1】按順序命名圖片，壓縮zip文檔，如01、02（壓縮包中圖片不能包含中文字）；

【2】新建作品，創(chuàng)建設(shè)備，在設(shè)備下添加頁(yè)面；

【3】在頁(yè)面下添加幻燈片，上傳壓縮過(guò)的zip文檔；

【4】設(shè)置幻燈片屬性

坐標(biāo)xy和寬高，設(shè)置滑動(dòng)方向、翻頁(yè)效果、循環(huán)播放，選擇自己喜歡的翻頁(yè)效果。

【5】添加圓點(diǎn)圖片

1>新建一個(gè)透明按鈕，在透明按鈕下放4個(gè)圓形；

2>復(fù)制透明按鈕，并給四個(gè)圓形添加同一顏色，使上下兩層圓形重合；

3>為幻燈片添加事件，分別是播放進(jìn)度1時(shí)，藍(lán)點(diǎn)1隱藏同層控件；播放進(jìn)度2時(shí)，藍(lán)點(diǎn)2隱藏同層控件，以此類推；

4>根據(jù)需要，將藍(lán)點(diǎn)1前面的方框勾選（初始可見），其余藍(lán)點(diǎn)不夠選（初始不可見）

這樣，不一樣的翻頁(yè)H5效果就做好啦~是不是不會(huì)代碼也可以搞定了呢？

微信關(guān)注“iH5學(xué)院”，跟我們一起“零”代碼從小白到H5大神~