免费获取策划方案多一份参考,总有益处

重庆建网站

Website construction

案例587

重庆建网站

如何在10分钟内创建一个交互式HTML5广告

来源:派臣科技|时间:2019-08-21|浏览:

随着网络技术的不断发展,Flash运用正在逐年的减少,互动广告的形势逐渐被HTML5所代替。今天,耽误大家10分钟的时间,教你学会构建一个交互式HTML5广告。

在这之前,我们要知晓什么是互动广告?

让我们快速回顾一下。最早,我们有文字广告,文字广告基本上就是一个简短的文字简介,并且链接到广告商相应的页面中,比如与之对应的产品或服务页面。

接下来随着技术提升,就是静态横幅广告。这些静态图像比文字广告更有吸引力,因为图片比文字广告更有价值。

再接着,Flash技术就出现在桌面浏览器上。Flash是革命性的改变。因为它使一波动画横幅广告和互动广告变为可能。动画广告更能吸引用户的注意力,从而提高点击率,创造效益。

直到2010年,苹果公司向全世界证明展示了使用HTML5的好处,这才让Flash技术逐渐衰落。

网站建设广告公司看到了移动领域的巨大增长潜力,因此开始将HTML5实现为一个新的跨平台广告模式。这种模式就称为HTML5交互式,由新的行业标准如MRAID、MRAID2等支持。

HTML5技术,现在在智能手机、平板电脑和桌面浏览器上广泛被使用。

一个互动HTML5广告由5个主要元素组成:html(主入口点)、js(包含逻辑的javascript)、main.css (CSS样式表)、资产(视觉资产)、出站链接(广告应该把用户带到哪里)。

下面我们就来具体操作吧!

第一部分:index . html

HTML由标准的HTML主入口点组成。也就是元视图端口,以及到main.css和main.js的链接。

第二部分:MAIN.JS

js是一个Javascript文件,驱动产生与广告的所有交互。jQuery将有助于我们使用的大多数DOM操作技术。接下来,我们要创建一个简单的基于图像的预加载函数。我们预加载了一些与广告相关的图形化保存。当广告加载时,您会注意到我们创建了两个div,分别称为scene1和scene2。scene1包含发光瓶子的div。当它被单击时,它通过gotoScene2函数转换到scene2。scene2本身包含了一个标签div,点击后它会重定向到嘉士伯的Facebook页面。

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

css文件包含所有css相关的样式。我们还可以添加一些用户喜欢的标准算法,比如bounceIn和bounceOut。

第四部分:可视化资产

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

第五部分:行动呼吁(CTA)

这是任何互动广告最重要的呈现部分。必须设计成,让用户想要通过点击了解内部更多信息。它必须是一个引人注目的信息,时刻与用户的好奇心相联系。

总结

小编希望本文对您有用。正如您所看到的,交互式广告非常容易构建,您自己组装它所花费的时间不超过10分钟。

留言

返回顶部

君
重庆网站建设重庆建网站如何在10分钟内创建一个交互式HTML5广告