如何在10分钟内构建交互式HTML5广告
本文出生地传送门→→→→→如何在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个主要元素:
- 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)
这是任何互动广告最重要的部分。行动号召必须设计得很好,用户实际上希望点击以找出更多。
它必须是一个引人注目的信息,与用户的好奇心息息相关。