随着Flash的消亡，交互式广告的责任被传递给了HTML5。在这里，我们将学习如何在短短10分钟内建立一个交互式的HTML5广告。
今天，我们想演示如何构建交互式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个主要元素：
- index.html（主要入口点）
- main.js（包含逻辑的javascript）
- main.css（CSS样式表）
- 资产（视觉资产）
- 出站链接（广告应让用户访问的地方）
让我们开始制作广告…
第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）
这是任何互动广告最重要的部分。行动号召必须设计得很好，用户实际上希望点击以找出更多。
它必须是一个引人注目的信息，与用户的好奇心息息相关。
