Join Chris Converse for an in-depth discussion in this video Creating the main ad link and container, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- View Offline
- Now to begin our project, let's go into the exercise files. Let's find banner_ad.html, and let's open this up inside 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 says markup goes here. Let's delete this, and the first thing we're gonna add is an anchor link. We're gonna build our entire banner ad inside of a main anchor link container so 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 of all of these elements because we need to be able to target unique 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 target the myAd container inside, so let's come up here and 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 that every item that we position inside of the myAd container will position themselves in relation to the myAd container, and the overflow hidden means that anything positioned outside of the area will be masked out, so we won't see anything that comes off screen outside 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 editor has 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 is 650 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 element to just 10 pixels of padding. This body element isn't being used inside of our banner ad. I just had this in the background so that I can position this.
So, again, I'll just set this to 10 pixels, so I can see a 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 use of our sprite sheet graphic to create the clouds background.
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.
- Downloading GSAP
- Creating the ad layout, link, and constraint
- Adding the photos and text
- Animating the artwork
- Setting the ad to fade in on load
- Animating the letters of a headline