Css3 banner

A few weeks ago I tried to convert a banner I’ve made in flash to css3.

The flash banner is situated here on the front page : http://www.qtrexshop.eu/

Swfobject is used to only show it when flash is available. When not, an image is shown. I like it that way. There is also an html5 slideshow on the page that works well on mobile. So on mobile, there is not to much animation going on, just the slideshow, the flash is not shown and the 2 static images instead are scaled with css.

I’ve been reading a bit about css3 animations, that there is a performance benefit over javascript, that it uses the gpu and I thought of giving it a try.

In the past I’ve made pure javascript banners for testing and the performance on mobile was to bad.

The result and workflow in css3 are nice. An image, a bit of html, and a few lines of special css for animating.

The result is here: http://ictbram.com/css3banner/

Modernizr is used to detect if cssanimations are available.

For restarting and keeping the animations synchronised I used jQuery that removes and adds the animation css again.

$(‘#kamionneke’).removeClass(‘kamionnekeAni’).animate({‘nothing’:null}, 1, function () {$(this).addClass(‘kamionnekeAni’);});

In a test environment I saw the banner was not functioning really usable on that page. The html5 slideshow even started to stutter on chrome / desktop, the rotation animation did not work on a test mobile phone, performance was not that good, maybe a bit better then javascript, but not outstanding.

So the flash banner will just remain, but I like the workflow and new possibility for bringing animation to the web. So I’m posting this as a reference for maybe a future thing.