HTML5 Banner Ad Examples: 6 Live Animated Banners and Why They Work

Most lists of HTML5 banner examples are screenshots of animated banners, which is a bit like reviewing a film from its poster. The banners below are running live, in iframes at their real size, the way an ad server would serve them. Each one shows one pattern that works, explains why, and comes with the code: every example is one HTML file (plus a product image in three of them) that you can download and adapt.

The brands are made up, so you can copy the structure without copying anyone's campaign.

1. The three-frame story

The classic structure, and still the most reliable: hook, product, call to action. Three seconds per frame, nine seconds per loop, two loops, and the banner stops on the last frame so the CTA and the logo are what stays on screen.

Why it works:

• Every frame makes sense on its own. People do not watch banners from the start. Whichever frame they catch, they get a complete thought.
• It ends on the CTA, not on frame one. A banner that loops forever and happens to stop on the headline loses the brand and the button.
• Three seconds is enough. Most frames carry four to six words. Longer frames do not get read more, they just slow the story down.

2. Offer first

When the message is an offer, put it on screen from the first frame and use motion only for emphasis. Nothing waits behind an intro.

Why it works:

• The number is the headline. "40% off" is read in a fraction of a second. "Our biggest autumn event is here" is not.
• The price line answers the next question (from how much?) before anyone has to click to find out.
• The motion stops. The CTA nudges three times and then rests. Endless pulsing buttons read as anxious, and many publishers reject ads that never stop moving.

3. Kinetic type, no images

A banner does not need a product shot. Here the words are the animation: three short lines in, a bar, a CTA. The whole file is a few kilobytes, which makes it trivially light for any weight limit.

Why it works:

• Rhythm does the work. Three short lines with the same beat are easier to read than one long sentence.
• One accent colour. The last line and the CTA share the colour, so the eye goes from the promise to the button.
• Type-only banners scale. The same structure works at 320×50 and 160×600 with almost no redesign.

4. A real deadline, said once

Urgency works when it is concrete and true. "Order by Thursday 6 pm for Sunday" beats a countdown that resets every time the page loads.

Why it works:

• The deadline is a fact, not a shout. No red flashing, no "HURRY". The tone matches the product.
• Small motion, then stillness. The flower opens in about a second and the banner is still from there on, which also makes it a good static backup if the HTML5 never loads.
• The CTA names the action ("Choose a bouquet"), not just "Learn more".

5 and 6. One idea, three sizes

The hardest part of a campaign is not the master banner, it is the set. Here is the offer from example 2, re-laid as a 728×90 leaderboard and a 320×50 mobile strip.

What changes between sizes:

• The leaderboard reads left to right. Logo, offer, product, button, in one line. Nothing is stacked, because 90 pixels has room for one line of large text.
• The 320×50 keeps only what sells: the offer, the product name and the button. The product shot and the price line go. If you start a campaign from this size, the rest gets easier (more on that in mobile banner ad sizes).
• The idea stays the same. Same colours, same offer, same button label, so the client recognises one campaign across every placement.

What the examples have in common

The patterns above are different, but the rules underneath are the same ones every ad platform checks:

Rule	Why
Animation stops within 30 seconds, including loops	Required by Google Ads, IAB and most publishers
The banner ends on the brand and the CTA	That is the frame most people see last
<meta name="ad.size" content="width=…,height=…"> in the head	Ad servers and preview tools read the size from it
The click goes through clickTag, never a hard-coded URL	The ad server needs to count the click; see clickTag explained
One file or a small zip, well under the brief's weight limit	150 KB is still the usual line; see HTML5 banner specs 2026
No external requests beyond what the platform allows	Fonts and libraries from unapproved hosts get rejected

The examples use system fonts and CSS only, so they need nothing external. In production you would usually add your brand font as a file in the zip, and an animation library such as GSAP if the timeline gets complex.

How to use these examples

Download any of them with Get the code: it is one HTML file with the styles and the script inside (the Solara and Nova banners also load a product PNG, bottle.png or shoe.png, from the same folder). Change the copy and colours, add your images, put the file in a folder named index.html with its assets, zip it, and it is a valid HTML5 banner. The clickTag variable at the top is the one most ad servers replace with their tracking URL.

Then do what the campaign actually needs: export every size in the brief and check them side by side before the client sees them. That is where most problems show up, a headline that fits the 300×250 and breaks the 320×50, or a loop that ends on the wrong frame in one size only.

Related reading

• Mobile banner ad sizes 2026: 320×50, 320×100, 300×250 and 320×480, drawn at actual size.
• Banner ad sizes 2026: every size worth building.
• HTML5 banner specs 2026: weight and file limits per platform.
• How to share Google Web Designer banners with clients.