This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

HTML 5 Banners – Part 1 – Introduction + Moving Objects

4 MINUTE READ | February 17, 2012

HTML 5 Banners – Part 1 – Introduction + Moving Objects

As George pointed out in a previous article, Flash banner ads are on their way out as HTML 5 becomes a the standard for content creation. With Adobe’s future endeavors being powered by HTML 5 instead of flash, today is the perfect day to learn how to use CSS’ powerful animation library. For this set of tutorials, we will create this banner:

While HTML5 will become the official standard, each browser has its own implementation of the css methods. For instance, Webkit based browsers such as Google Chrome and Safari use the prefix -webkit before any of the methods, Mozilla Firefox uses -moz, IE uses -ie, etc. I will only being showing you -webkit, but to get the code to work in all browsers, create -moz, -ie, -opera prefixes for each css action.

We are going to create a small skeleton html page that has our banner. For brevity, we will use a fixed width, however, it is entirely possible to create a banner that is dynamic in size.

<!DOCTYPE html><html><head></head><body><div id="adspace"><div id="logo"><img src="http://tools.pmg.co/images/pmglogo.png"></div></div></body>

With the corresponding CSS:

#adspace {

/*center the banner */

margin: 0 auto;

width:750px;

height:150px;

border:1px solid black;

overflow: hidden; /* We don't want the objects to go passed the adspace, nor do we want scroll bars on our banner */

}

For this example, we will be using two animation CSS methods, the animation-duration and animation-name. We will also use the transform and translate methods.

#logo {

-webkit-animation-duration: 1s;

-webkit-animation-name:move_logo_inward;

-webkit-transform:translate(10px, 10px);

}

The animation-duration method is pretty self explanatory. It decides how long it takes to run an animation. Note that all these animations are run right when the page loads. The animation-name method will be used later on in this tutorial when we go over keyframes.

Transform is a tricky method. Imagine altering shapes in photoshop. Whenever you click on the shape, you get a bounding box, and a mouse cursor with a “move” command hovering over it. That is exactly what transform does. Using the transform method allows you to skew, distort, bend, and move the object any way you want. For this purpose we want to move the object from point A to point B. The method translate(x,y) does that for us.

Keyframes might be the most important addition of CSS3. It is the reason that animations are so powerful. Keyframes in CSS are exactly like frames are in Adobe Flash CS5, except for when using CSS, the proper method is not to use FPS (frames per second) like in Flash, with CSS, it is more preferable to use percentages.

@-webkit-keyframes move_logo_inward {

0%

{

-webkit-transform: translate(-200px, 10px);

}

100%

{

-webkit-transform:translate(10px, 10px);

}

}

Note that I named this keyframe sequence “move_logo_inward”, and in the previous block, I named the animation-name to be the same. This sets the object to use this keyframe sequence. When using keyframes, the browser will automatically animate from one keyframe to the next.

This is a good start to understanding HTML5 and CSS3. This code did not use a single line of Javascript, and the outcome is animations that are twice as smooth. In the next segment, we will go over CSS’ new 3D space.

<!DOCTYPE html>

<html>

<head>

<title>PMG HTML 5 Banner</title>

<style type="text/css">

Stay in touch

Bringing news to you

Subscribe to our newsletter

#adspace {
margin: 0 auto;
width:750px;
height:150px;
border:1px solid black;
overflow: hidden;

}

#logo {
-webkit-animation-duration: 1s;
-webkit-animation-name:move_logo_inward;
-webkit-transform:translate(10px, 10px);
}

@-webkit-keyframes move_logo_inward {
from
{
-webkit-transform: translate(-200px, 10px);
}
to
{
-webkit-transform:translate(10px, 10px);
}
}

</style>

</head>
<body>
<div id="adspace">

<div id="logo"><img src="http://tools.pmg.co/images/pmglogo.png"></div>

</div>
</body>
</html>


Posted by Chris Alvares

Related Content

thumbnail image

Get Informed

Lessons from the Quantcast Measure Hackathon

3 MINUTES READ | June 12, 2018

Get Inspired

How to Build Dynamic Banners that Clients Love

3 MINUTES READ | May 3, 2017

thumbnail image

Get Inspired

How We Built and Tested a New Website in Five Days

7 MINUTES READ | May 6, 2016

Get Informed

PART 2: SHOULD MARKETERS BE CONCERNED ABOUT MOBILE AD BLOCKING?

3 MINUTES READ | February 22, 2016

Get Informed

Partner Management: The PMG Way

4 MINUTES READ | February 18, 2016

ALL POSTS