JavaScript and HTML Banners

It’s only a matter of time before banners are created using HTML and JavaScript. I wanted to take a little look at what's available right now to create simple banner animations without Flash. Try to block these banners, jerk-faces!

jQuery Banner

jQuery is my favorite cross-browser animation method. On the banner front, using callbacks and delays, you can pretty easily create sequenced animations with rich easing and effects. It’s not something you can use in every situation, it’s mostly for site-specific banners on sites that already use jQuery.

This could be your website traffic.

MatthewLein.com

Pure HTML/CSS Banners

Using jQuery for widely deployed banners isn't realistic because it requires you to load around 80k of scripts, which would exceed most size limitations before you even get to the content. Instead, I think CSS transitions will be key for most simple banners in the future. They are (will be) built into the browser, so they don't require any scripts to animate and they hopefully in the future will use graphics acceleration to make it all look smooth. The example below is very simple, but shows the potential. Currently CSS transitions are only supported in Safari and Chrome (with Firefox adding support soon in FF4).

So what can I take away from this? Well, making the CSS banner took around an hour to do (but I will get faster) and can be seen by only a small portion of the major browsers. The same thing done in Flash would have taken me around 52 seconds to make, and would reach 99% of all computers. IE9 hasn't officially pledged support for CSS transitions, so it’s anyone’s guess on when they will be used. My guess is 6 years.