Wednesday, 11 December 2013

Html Banners from Scratch

This is an example of a banner Ad created from scratch

This weights 355 kb, but I´m using a .png for the big image, if I do it with a .gif, it just doesn´t reach 100 kb. I could optimize of course.

Also it could be launched as an standard banner or as a conventional

For the art, I´m taking the illustrations of the team from Stress, this is a creative agency from Spain, we usually collaborate daily. Instead of loading 17 images from portraits, I just load one with all of them so as to move it.


So, I´m just using a long strip with all illustrations like this:


Also a .png for the logo of the company
And the colors is just animating the background color

In the code I´m just using:
- GSAP TweenLite (CSSPlugin, EasePack and TweenLite)
- Screenad API from Weborama: This is for positioning the banner and have metrics.




This is my code:


You can see the code here at: www.fernandocomet.com/stress/stress_banner.html

I could use better timelinelite for the animation.
See Greenshock  GSAP JS for tweening
Post a Comment