如何在10分钟内构建交互式HTML5广告

随着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个主要元素:

  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,分别称为scene1scene2

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

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

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

第3部分:MAIN.CSS(样式表)

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

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

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

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

第4部分:视觉资产

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

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

第5部分:号召行动(CTA)

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

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

Back to Top