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