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

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

什么是互动广告？

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

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

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

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

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

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

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

如下是视频连接，展现了在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）

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

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