怎么做特別牛的720°全景H5？制作全景的效果并不復(fù)雜，我們制作只需要借助 意派Epub360 專業(yè)H5工具中的全景容器組件，提前準(zhǔn)備好2:1比例的背景素材圖，按照要求添加進(jìn)去就可以了。一、案例效果演

怎么做特別牛的720°全景H5？

制作全景的效果并不復(fù)雜，我們制作只需要借助 意派Epub360 專業(yè)H5工具中的全景容器組件，提前準(zhǔn)備好2:1比例的背景素材圖，按照要求添加進(jìn)去就可以了。

一、案例效果演示

二、組件結(jié)構(gòu)

全景容器組件我們簡單將其結(jié)構(gòu)拆為三個層級結(jié)構(gòu)：

1.最外層元素／背景

2.中層元素／背景

3.最內(nèi)層元素（交互元素放置層，簡稱：交互層）

最外層元素／背景是由全景容器組件最外層的圖片元素層組成，在手機(jī)上觀看時，距離我們的視線最遠(yuǎn)；

中層元素／背景是由全景容器組件中層的圖片元素層組成在手機(jī)上觀看時，相比最外層背景，距離視線較近，處于最內(nèi)層與最外層中間。

最內(nèi)層元素，在手機(jī)上觀看時，相比最外層背景，距離視線最近；一般我們用一個layer頁面來做這一層，可以在這一層做一些交互觸發(fā)的設(shè)置。

可以使用最外層背景（2:1圖）作為全景容器本身的背景，也可使用中層背景（2:1圖），也可以直接用頁面作為全景容器的背景（普通滿屏尺寸740X1136分辨率72dpi或者畫布）。

小技巧：層次之間在滑動屏幕時，會產(chǎn)生錯位視覺差效果，做的層次越多，視覺差效果越豐富。

三、應(yīng)用場景

全景容器組件，可以將長寬比例為2:1的畫面，以Y軸為中心軸，使畫面首尾相連，360°旋轉(zhuǎn)查看，目前已有該組件案例供大家參考。

《這些聲音你聽過嗎？》

《烏蘭察布第二屆冰雪藝術(shù)節(jié)》

三、素材準(zhǔn)備

文末附件下載素材，非商用，僅供學(xué)習(xí)使用。

1.如想要讓最外層背景可見，中層背景不能是JPG格式的，可以是帶有透明區(qū)域的PNG格式圖片；另外，layer層內(nèi)不能放置尺寸比例為2:1的JPG格式大圖。

2.相關(guān)尺寸規(guī)范。默認(rèn)的大背景尺寸比例為2:1（ 2000 x 1000 px 分辨率72dpi），所有的元素其他的小型元素都是在PS中設(shè)計好后逐個導(dǎo)出。注意：PNG格式的圖片裁切掉不需要透明區(qū)域。大圖的尺寸因?yàn)橄鄬^大，但還是要控制下大小，盡可能壓縮。

3.將所有的元素或者大圖在PS等設(shè)計軟件中完成。將元素在PS等設(shè)計軟件中設(shè)計排版完成后逐個導(dǎo)出PNG或JPG后，再上傳到Epub360編輯器設(shè)置。PS中的設(shè)計示例如圖：

4.只要保證每個小的元素跟大背景的比例正常即可，所有零散的PNG圖片都是放在全景容器的layer層里。如圖：

也可以將多個小元素放在一張PNG大圖（尺寸比例2:1）上導(dǎo)出，作為單獨(dú)的一層，放在中層背景或Layer層里，看個人的需求。

四、組件教程

基本用法

1.添加全景容器組件：高級組件——交互組件——全景容器。

2.點(diǎn)擊全景容器添加組件

3.點(diǎn)擊【使用中層背景圖片】和【使用外層背景圖片】的縮略圖，可以替換尺寸比例為 2:1 的圖片（ 2000 x 1000 px 分辨率72dpi），兩個背景層也可以不設(shè)置。

4.點(diǎn)擊上圖中任意一層背景圖，會顯示素材上傳界面，僅支持上傳JPG／PNG格式的圖片。

4.雙擊Layer層設(shè)置，可直接切換到layer頁面中去添加或修改素材。

5.點(diǎn)擊后進(jìn)入到Layer中的排版效果如圖，點(diǎn)擊左上角的小黑三角可以切換回頁面。

交互層設(shè)置。用戶最關(guān)心的問題在全景容器中進(jìn)行一些交互設(shè)置，一般主要就是在Layer層（最內(nèi)層）中進(jìn)行的。

凡科微傳單手機(jī)怎么用？

過簡單的操作，加以豐富而有內(nèi)涵的場景，快速創(chuàng)建出圖文并茂、音樂與動畫交融的H5微，將微的鏈接或二維碼分享至社交網(wǎng)絡(luò)中，不僅能吸引粉絲的注意力，還能為商家?guī)頋q粉，微自帶的傳播性也讓商家在朋友圈營銷推廣更輕松、更有力。