Join Chris Converse for an in-depth discussion in this video Adding the background clouds, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- Now the first element we're gonna add inside…of our main ad container is going to be a div element…for the clouds.…So let's scroll down here.…Let's get our cursor…inside of the myAd div.…Gonna end a few Returns and split this open.…With my cursor inside, we're gonna add a div element.…We're also gonna add an id on this,…and we're going to add a unique id…to every one of our elements.…We don't want to use standard HTML,…like H1 tags and paragraph tags, for example,…because we don't want our ad to be picked up by…other style sheets.…
And we're typically not worried about Search Engine…Optimization in a banner ad,…because it's the result of the Search Engine Optimization…that usually results in your ad being seen.…So we'll start by adding a div element.…We'll add a class on this one of myAd_Img,…and then we'll add our unique id,…called myAd_clouds,…and then we'll end the div element.…Now I'm also using a class here,…because I do wanna be able to reuse…some of our rules for all of our individual elements.…Now as I mentioned earlier in the course, we're gonna be…
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