• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
February 17, 2012

HTML 5 Banners – Part 1 – Introduction + Moving Objects

Posted by Chris Alvares

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:

CSS Compatibility

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.

Step 1: Create your HTML Skeleton

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 */
}

The Animation Methods

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

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.

Put it all Together

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">

#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>

AdvertisingAdvertising Strategydev
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.