Join Chris Converse for an in-depth discussion in this video Adding the photo and headlines, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- Now we're going to add a div element that's going…to hold the photo.…So I'm going to type in my code here a little bit…just so I can see more on the screen.…So now after the myAd_clouds div,…let's hit a return.…Now we're going to add another div container…with an id of myAd_photo…and we're also going to use the class…of myAd_image as well.…Let's come in here and start with a div element.…We'll add a class…of myAd_image,…then we'll set an id…of myAd_photo,…then we'll end the div element.…
So by using the myAd_image,…we already get the background settings,…we get the position absolute.…Now we need to create another rule up here…that targets the myAd_photo…and gives that particular object dimensions as well.…So inside of our CSS,…let's hit a return;…let's target #myAd,…space, #myAd_photo,…put in our brackets.…We're going to set a width to inherit;…we're going to set a height of 143 pixels;…we're going to set a background position to zero pixels…on the x and negative 325 on the y,…then we're going to set a bottom…positioning property to zero,…
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