Join Chris Converse for an in-depth discussion in this video Adding the remaining design elements, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- So now we're going to add four additional…html elements for the remaining graphics.…We're going to add the shadow, the subhead text,…which is a graphic instead of using a font,…the marker, and the surfboard.…So, let's come down into our html file,…let's come down here, and after the two headings,…format these a little bit, let's hit a "return"…and let's add in each one of these items.…We're going to reuse the "myAd_image" class in each one,…and we're going to give each one…of these their own custom "id"…So we'll start with the first "div:"…We'll set a class equal to "myAd_Img"…then we'll set an "id," this one will be "myAd_shadow"…end the "div." Next "div."…Again, we'll add a class of "myAd_Img"…the "id" will be "myAd_txt3," end the "div."…Then we'll add another "div," same class again.…
The "id" for this one will be…"myAd_marker," end that "div."…And then, finally, another "div,"…same class and I'll set the "id" to…"myAd_surfboard" and then end the "div."…Then I'll format these a little bit.…And now with these in place we'll add the CSS Rules…
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