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

在這之前，我們要知曉什么是互動廣告?

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

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

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

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

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

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

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

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

第一部分：index . html

HTML由標準的HTML主入口點組成。也就是元視圖端口，以及到main.css和main.js的鏈接。

第二部分：MAIN.JS

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

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

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

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

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

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

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

總結

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