隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，F(xiàn)lash運(yùn)用正在逐年的減少，互動(dòng)廣告的形勢逐漸被HTML5所代替。今天，耽誤大家10分鐘的時(shí)間，教你學(xué)會(huì)構(gòu)建一個(gè)交互式HTML5廣告。

在這之前，我們要知曉什么是互動(dòng)廣告?

讓我們快速回顧一下。最早，我們有文字廣告，文字廣告基本上就是一個(gè)簡短的文字簡介，并且鏈接到廣告商相應(yīng)的頁面中，比如與之對應(yīng)的產(chǎn)品或服務(wù)頁面。

接下來隨著技術(shù)提升，就是靜態(tài)橫幅廣告。這些靜態(tài)圖像比文字廣告更有吸引力，因?yàn)閳D片比文字廣告更有價(jià)值。

再接著，F(xiàn)lash技術(shù)就出現(xiàn)在桌面瀏覽器上。Flash是革命性的改變。因?yàn)樗挂徊▌?dòng)畫橫幅廣告和互動(dòng)廣告變?yōu)榭赡?。?dòng)畫廣告更能吸引用戶的注意力，從而提高點(diǎn)擊率，創(chuàng)造效益。

直到2010年，蘋果公司向全世界證明展示了使用HTML5的好處，這才讓Flash技術(shù)逐漸衰落。

網(wǎng)站建設(shè)廣告公司看到了移動(dòng)領(lǐng)域的巨大增長潛力，因此開始將HTML5實(shí)現(xiàn)為一個(gè)新的跨平臺(tái)廣告模式。這種模式就稱為HTML5交互式，由新的行業(yè)標(biāo)準(zhǔn)如MRAID、MRAID2等支持。

HTML5技術(shù)，現(xiàn)在在智能手機(jī)、平板電腦和桌面瀏覽器上廣泛被使用。

一個(gè)互動(dòng)HTML5廣告由5個(gè)主要元素組成：html(主入口點(diǎn))、js(包含邏輯的javascript)、main.css (CSS樣式表)、資產(chǎn)(視覺資產(chǎn))、出站鏈接(廣告應(yīng)該把用戶帶到哪里)。

下面我們就來具體操作吧！

第一部分：index . html

HTML由標(biāo)準(zhǔn)的HTML主入口點(diǎn)組成。也就是元視圖端口，以及到main.css和main.js的鏈接。

第二部分：MAIN.JS

js是一個(gè)Javascript文件，驅(qū)動(dòng)產(chǎn)生與廣告的所有交互。jQuery將有助于我們使用的大多數(shù)DOM操作技術(shù)。接下來，我們要?jiǎng)?chuàng)建一個(gè)簡單的基于圖像的預(yù)加載函數(shù)。我們預(yù)加載了一些與廣告相關(guān)的圖形化保存。當(dāng)廣告加載時(shí)，您會(huì)注意到我們創(chuàng)建了兩個(gè)div，分別稱為scene1和scene2。scene1包含發(fā)光瓶子的div。當(dāng)它被單擊時(shí)，它通過gotoScene2函數(shù)轉(zhuǎn)換到scene2。scene2本身包含了一個(gè)標(biāo)簽div，點(diǎn)擊后它會(huì)重定向到嘉士伯的Facebook頁面。

第三部分：MAIN.CSS(樣式表)

css文件包含所有css相關(guān)的樣式。我們還可以添加一些用戶喜歡的標(biāo)準(zhǔn)算法，比如bounceIn和bounceOut。

第四部分：可視化資產(chǎn)

互動(dòng)廣告需要與品牌相關(guān)的有趣的視覺效果。因此，建議和設(shè)計(jì)師合作開發(fā)交互式HTML5廣告。

第五部分：行動(dòng)呼吁(CTA)

這是任何互動(dòng)廣告最重要的呈現(xiàn)部分。必須設(shè)計(jì)成，讓用戶想要通過點(diǎn)擊了解內(nèi)部更多信息。它必須是一個(gè)引人注目的信息，時(shí)刻與用戶的好奇心相聯(lián)系。

總結(jié)

小編希望本文對您有用。正如您所看到的，交互式廣告非常容易構(gòu)建，您自己組裝它所花費(fèi)的時(shí)間不超過10分鐘。