- Now to begin our project,let's go into the exercise files.Let's find banner_ad.html, and let's open this upinside of a code editor.Now once you have the file open inside of the body area,let's come in here and select this comment here that saysmarkup goes here.Let's delete this, and the first thingwe're gonna add is an anchor link.We're gonna build our entire banner adinside of a main anchor link containerso that the entire ad will be clickable to a destination.So we're gonna start with an anchor tag.We're gonna set an id of myAdLink.

We'll set an href, and we'll point this back to lynda.com.Then we'll end the anchor tag.With that in place, I'll come in here, split this open,get my cursor inside of this anchor tag,and we're gonna add a div element inside of here.This is going to be the main container for the ad itself.So start with a div tag.We'll set an id of myAd,and then we'll end the div tag.Now we're going to be using ids inside ofall of these elements because we need to be able to targetunique items with our animation scripts.

Now with these two elements created,we're gonna add two CSS rules.We're gonna target the AdLink, and we're gonna targetthe myAd container inside, so let's come up hereand get our cursor inside of the styles area.Let's hit a return after the body element,and let's first target the AdLink.So a#myAdlink.We'll type display.We'll set that to an inline-block.Then we'll set a background color,24 for red, 80 for green, d6 for blue.

And then we'll make sure we put brackets around that.Next, we'll target the myAd id.Start with our bracket.We're gonna set a width of 650 pixels.We're gonna set a height of 200.We're gonna set position to relative.And then we're gonna set overflow to hidden.Now, by setting position relative, this means thatevery item that we position inside of the myAd containerwill position themselves in relation to the myAd container,and the overflow hidden means that anything positionedoutside of the area will be masked out,so we won't see anything that comes off screenoutside of that container.

So now I'll format this a little bit.At this point, we can see at least our bounding area.So if we preview this in a browser, or if your code editorhas a preview area, we can turn this on,and now we can see our ad is showing up down here.If I hover over this, I can see that this is a hyperlink,and we have a banner area here that is650 pixels wide by 200 pixels tall.Now jut to give myself a little bit more room on screen,I'm gonna come up here and change the body elementto just 10 pixels of padding.This body element isn't being used inside of our banner ad.I just had this in the backgroundso that I can position this.

So, again, I'll just set this to 10 pixels, so I can seea little bit more room as I'm working.So now with our main ad container in place,next we'll create another div element and make useof our sprite sheet graphic to create the clouds background.

Resume Transcript Auto-Scroll

Author

Released

7/20/2015

The GreenSock Animation Platform (GSAP) provides a fast, performance-optimized, framework for creating HTML5 animations. Learn to combine JavaScript and GSAP with any of your HTML-based projects, including websites, digital magazines and books, and even mobile apps.

In this course, Chris Converse shows how to combine GreenSock with HTML, CSS, and a sprite sheet graphic, to create a complete animated banner ad. He'll also introduce techniques for combining animations, rearranging elements, and jumping to specific points in the animation for testing. Plus, find out how to streamline your ad by serving just the files you need—reducing the file size and download speed.

The exercise files are free to all members. Download them and get started building your own project with GreenSock.