今天，我们想演示如何构建交互式HTML5横幅广告。

嘉士伯啤酒是一家价值数十亿美元的全球啤酒品牌，在全球拥有超过40,000名员工。除家居嘉士伯品牌外，他们还拥有其他品牌，如Tuborg，Somersby（苹果酒），Kronenbourg和Dali Beer（亚洲快速发展的品牌）。

什么是互动广告？

让我们快速回顾一下。在过去，我们有文字广告，基本上是一个简短的文字广告，并链接到广告客户的页面，产品或服务。

接下来是静态横幅广告。这些通常是静态图像。他们更引人注目的是文字广告，因为图片胜过千言万语。主要格式有300×250像素（盒），728×90（宽）或90×728（摩天大楼）。

然后，在桌面浏览器上一起Flash技术游戏。Flash是革命性的，因为它激发了一波动画横幅广告以及互动式横幅广告。动画广告吸引用户的注意力，从而提高点击率（CTR）。玩家甚至可以玩这样的微型游戏，或者将球扔进篮筐。

2010年，苹果公司向世界宣传了转向HTML5的优点，并且随着包括谷歌在内的巨头的加入，Flash技术迅速衰落。

广告技术公司看到了移动方面的巨大增长潜力，因此开始将HTML5应用于新的跨平台广告单元。这个单元被称为HTML5交互式广告，由新的行业标准支持，如MRAID，MRAID2等。

长话短说，交互式HTML5广告是一款现在适用于智能手机，平板电脑和桌面浏览器的广告。

那么嘉士伯广告关于什么？

以下是视频链接，展示了在iPhone上投放的互动广告：

这个互动广告的目标是提高人们对世界橄榄球七人赛的认识，这是一项在香港举行的橄榄球年度赛事。来自世界各地的最好的球队每年参加比赛，赢得最高奖项。嘉士伯是主要赞助商之一。

广告体验很简单。用户看到一个发光的嘉士伯啤酒瓶。一条消息是要求用户点击发光的瓶子。

点击它后，一个短的动画播放一个橄榄球运动员携带一个冷，冰桶嘉士伯啤酒。

一个有趣的品牌标语出现：“你准备好了啤酒吗？”？

然后，用户可以点击“在Facebook上找我们”链接访问广告客户页面以获取更多信息。

回到我们的定期编程

交互式HTML5广告包含5个主要元素：

1. index.html（主要入口点）
2. main.js（包含逻辑的javascript）
3. main.css（CSS样式表）
4. 资产（视觉资产）
5. 出站链接（广告应让用户访问的地方）

让我们开始制作广告…

第1部分：INDEX.HTML

index.html由标准的HTML声明组成。

这里重要的是元视口，以及与main.css和main.js的链接

正如你所看到的，这很简单。没有什么不寻常的。

第2部分：MAIN.JS（肉和骨头）

main.js是一个Javascript文件，用于驱动与广告的所有交互。

在顶部，我们插入jQuery的全部缩小的JS。请注意，您可以使用http://jquery.com/中的最新版jQuery

jQuery将对我们使用的大多数DOM操作技术有所帮助。

接下来，我们创建一个简单的基于图像的预加载函数。

我们预先加载了一些与广告相关的图形资产。

现在，谈逻辑。当广告加载时，您会注意到我们创建了2个div，分别称为scene1和scene2。

scene1包含发光瓶子的div。当它被点击时，它通过gotoScene2函数转换到scene2

scene2本身包含标语div，当点击时它会重定向到嘉士伯的Facebook页面。

基本上就是这样。非常简单的逻辑是必要的。

第3部分：MAIN.CSS（样式表）

main.css文件包含所有与CSS相关的样式。

在这个例子中，我们做了一些你通过CSS看到的酷炫动画

例如，发光的啤酒瓶使用-webkit-animation属性中的blinker值

我们还添加了一些用户喜欢的标准算法，例如bounceIn和bounceOut

第4部分：视觉资产

互动广告需要与品牌相关的有趣视觉效果。因此，建议您与交互式HTML5广告的设计师合作。

在我们的例子中，我们使用了：空白的绿色背景; 瓶子; 与橄榄球人拿着一个冷的冰桶啤酒的背景; 呼吁行动图形。

第5部分：号召行动（CTA）

这是任何互动广告最重要的部分。行动号召必须设计得很好，用户实际上希望点击以找出更多。

它必须是一个引人注目的信息，与用户的好奇心息息相关。