Basic about HTML5 banner
What is HTML5 Banner? – they are pieces of HTML5 that display advertisements.
The Banner HTML5 Format is a standard in-page ad that works on every platform that supports HTML5 technology (PC, cellphone, tablet, etc.). It can contain video or audio.
Why do we need them? – in the past, most of advertisements are Flash, because they are small and animation rich. But Flash is no longer supported by major browsers and will soon become a dead technology. HTML5 banner emerges as a replacement.
What’s the differences between HTML5 banner and regular HTML webpage? – HTML5 banner, like Flash ad, is a standalone piece, which is running separately from its host pages with its own resources, while regular HTML webpage is a part of the site content and share the same resources with all other pages. Because of this characteristics, HTML5 banner can be deployed at any place as a self-contained media.
What makes up of a HTML5 banner? – No alien languages, they are just HTML5, CSS, Javascript. Anything fancy would be considered dangerous since some browsers may not support them. We want the ads to run at most places it can so the technologies must be simple enough and well-supported.
Specification of HTML5 Banner
The specification might be lengthy, fully described here. This document covers all best practices one should follow to develop a HTML5 banner piece that is up to industrial standard.
TL;DR – The deliverables of a HTML5 banner include:
- ZIP file containing:
- index.html main file
- Javascript, CSS files used in it
- External media files used in it (Images, videos, sounds, XML, etc.).
-
Backup image
The zip file size must not exceed 100kb, and for the backup image, it must not exceed 40kb. In fact, the size of the resources does not really matter since they can be ziped upon transport and cached. But there is an industrial requirement anyway.
Looks complicated enough, so how do you actually creat a HTML5 ad banner?
Create a HTml5 ad banner
A piece of HTML5 ad banner often consist of following:
- A pre-defined size: 150×100, 300×250, 720×90, etc. they are standard.
- A collection of images, videos, audios
- A series of animation that needs to play from start to end
A file structure might look like below:
This structure very well deals with the elements above:
- app.css – specify dimension, position and other attributes of every element in the Ad. CSS for HTML5 banner does not need to be beautiful, it just needs to be concise and fast.
- app.js – contains all the code to control the animations.
- sizzle.min.js – the selector engine used by jQuery, you do not need the whole jQuery bundle due to lack of space.
- TweenMax & TimelineMax – a robust library to perform animation, it is small, cross-browser and high performance
The first file we need to create is the index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>GSAP animation</title>
<link rel="stylesheet" href="app.css"/>
<script src="TweenLite.min.js"></script>
<script src="TimelineMax.min.js"></script>
<script src="easing/EasePack.min.js"></script>
<script src="plugins/CSSPlugin.min.js"></script>
<script src="sizzle.min.js"></script>
<script src="share.js"></script>
<script src="app.js"></script>
</head>
<body>
<a id="myAdLink" href="http://www.example.com">
<div id="myAd">
<div id="frame1" class="bn"></div>
<div id="frame2" class="bn"></div>
<div id="frame3" class="bn"></div>
<div id="frame4" class="bn"></div>
<div id="frame5" class="bn"></div>
<div id="frame6" class="bn"></div>
</div>
</a>
</body>
</html>
All elements are there but hidden from view. It is different from normal approach that generate DOM elements based on needed. HTML5 Ad Banner focuses on visual effects, not DOM efficiency. So everything is there we just need to manipulate them and ignore complexity of adding/removing elements.
We will specify visual attributes of the elements in CSS file as below:
a#myAdLink { display: inline-block; background-color: #2480d6; }
#myAd { width: 300px; height: 250px; background-color: #f28023; border: 1px solid #ccc; position: relative; overflow: hidden; }
#myAd img { position: absolute; top: -90px; }
.bn {
position: absolute;
left: 0;
top: -250px;
width: 300px;
height: 250px;
background-repeat: no-repeat;
background-position: 0 0;
}
#frame1 {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...SuQmCC');
}
#frame2 {
background-image: url('data:image/png;base64,iVBORw0KGg...5CYII=');
}
As you may notice, the images are encoded into base64 string. Reason? Because of:
- All resources must be local to the html file
- Images are available immediately, it is bad if the animate starts but images aren’t fully loaded yet.
Now, it’s time to start manipulating the frames. We will start with #frame1 till the last frame.
window.onload = function(){
var f1 = $('#frame1'),
f2 = $('#frame2'),
f3 = $('#frame3'),
f4 = $('#frame4'),
f5 = $('#frame5'),
f6 = $('#frame6');
var tl = new TimelineMax();
// Copy drops from top down and bounce, stays for 2 seconds then disappear
tl.to(f1, 2, { y: 250, opacity: 1, ease: Bounce.easeOut })
.stay(f1)
.to(f1, 0.5, { y: -250, opacity: 0, ease: Power1.easeIn });
// Copy drops from top down, stays for 2 seconds and ease out
tl.to(f2, 2, { y: 250, opacity: 1, ease: Bounce.easeOut })
.stay(f2)
.to(f2, 0.5, { y: -250, opacity: 0, ease: Power1.easeIn });
....
Regarding the animation, there will be a lot of animation libraries out there to choose from. Greensock was chosen here because it is small, animation packed and solid. If you want to display your Ad on Canvas, perhaps you should choose something like Raphael.
After all hard work done, you can open your ad from index.html in any browswer and enjoy the result!
P.S: alternatively you can use online services like html5maker to produce the ads, but you won’t have full control over the code and it is easy to get stucked.
thethanghn 🙂
Nguyễn Thế Thắng 