How to build interactive HTML5 ads in 10 minutes __html

This article is born portal →→→→→ how to build interactive HTML5 AD---Zhinghua network in 10 minutes-a temperamental website

With the demise of Flash, the responsibility for interactive advertising is passed on to HTML5. Here, we will learn how to create an interactive HTML5 ad in just 10 minutes.

Today, we want to demonstrate how to build an interactive HTML5 banner ad.

Carlsberg is a global beer brand worth billions of of dollars, with more than 40,000 employees worldwide. In addition to home Carlsberg brands, they also have other brands such as Tuborg,somersby (cider), Kronenbourg and Dali Beer (Asia's fast-growing brand). what is interactive advertising.

Let's take a quick look at it. In the past, we had text ads, basically a short text ad, and links to advertisers ' pages, products or services.

Next is the static banner ad. These are usually static images. They are more eye-catching is the text advertisement, because the picture surpasses the innumerable words. The main formats are 300x250 pixels (boxes), 728x90 (wide) or 90x728 (skyscrapers).

Then, on the desktop browser together Flash technology games. Flash is revolutionary because it inspires a wave of animated banner ads as well as interactive banner ads. Animation ads attract the attention of users, thereby increasing the click Rate (CTR). Players can even play such miniature games, or throw the ball into the basket.

In the 2010, Apple promoted the world to HTML5, and flash technology was rapidly fading with the addition of giants including Google.

Advertising technology companies have seen the tremendous growth potential of mobility, so they are starting to apply HTML5 to new Cross-platform advertising units. This unit is called HTML5 Interactive advertising, supported by new industry standards, such as MRAID,MRAID2.

Long story short, interactive HTML5 ads are now available for smartphones, tablets and desktop browsers. so Carlsberg ads about what.

Here's a video link that shows the interactive ads on the iphone:

The goal of this interactive ad is to raise awareness of the seven-person World Rugby tournament, an annual rugby event in Hong Kong. The best teams from all over the world take part in the tournament every year and win the highest award. Carlsberg is one of the main sponsors.

The advertising experience is simple. The user sees a glowing Carlsberg beer bottle. One message is to ask the user to click on the glowing bottle.

After clicking on it, a short animated play of a rugby player carries a cold, ice bucket of Carlsberg beer.

An interesting brand slogan appears: "Are you ready for the beer?" ”。

Users can then click the "Find us on Facebook" link to visit the Advertiser page for more information. back to our regular programming

Interactive HTML5 ads contain 5 main elements: index.html (primary entry point) main.js (JavaScript containing logic) main.css (CSS style sheet) assets (visual assets) outbound links (where ads should be made accessible to users)

Let's start making ads ... part 1th: index.html

The index.html is made up of standard HTML declarations.

The important thing here is the meta viewport, as well as the links with Main.css and main.js

As you can see, it's very simple. There is nothing unusual about it. Part 2nd: main.js (Meat and Bones)

Main.js is a JavaScript file that is used to drive all interactions with advertising.

At the top, we plug in all of jquery's reduced JS. Please note that you can use the latest version of jquery in http://jquery.com/

jquery will help with most of the DOM manipulation techniques we use.

Next, we create a simple image-based preload function.

We have preloaded some graphic assets related to advertising.

Now, talk about logic. When ads are loaded, you'll notice that we created 2 Div, called Scene1 and Scene2, respectively.

Scene1 contains a div of glowing bottles. When it is clicked, it transitions through the GotoScene2 function to the Scene2

The scene2 itself contains the banner Div, which redirects to Carlsberg's Facebook page when clicked.

That's basically it. Very simple logic is necessary. Part 3rd: main.css (style sheet)

The Main.css file contains all CSS-related styles.

In this example, we did some cool animations you see through CSS.

For example, a glowing beer bottle uses the Blinker value in the-webkit-animation property

We've also added some standard algorithms that users like, such as Bouncein and Bounceout, Part 4: Visual assets

Interactive advertising requires interesting visual effects associated with the brand. Therefore, it is recommended that you work with an interactive HTML5 advertising designer.

In our example, we use: a blank green background; Bottle With rugby man holding the background of a cold ice bucket beer; Call for action Graphics. Part 5th: Call for Action (CTA)

This is the most important part of any interactive ad. The call to action must be well designed, and the user actually wants to click to find out more.

It must be a compelling message, closely related to the user's curiosity.