scientific and technical website design projects news

CSS3 animated slideshows

Slide-shows have become commonplace on websites, and there are three reasons for this:

A slide show makes good use of our page, using the time dimension to tell our visitors about what we do lets us get over a lot of content easily without their having to scroll about the page, or navigate through the site. Well scripted slide-shows are, therefore really helpful tools…

Dependable Javascript libraries such as JQuery and Moo Tools, allows pretty much any web designer to script a simple show – and most browsers will display it!

Loss of Flash before the mobile browser, most designers would build a fancy website using Flash to create an immersive ‘experience’. Unfortunately, for a variety of reasons Flash is not supported on many mobile platforms, and as more people browse the web on their phone Flash has become less attractive. It is hard to script animation in Javascript to the same quality that you could achieve easily in Flash, so even well funded sites have opted for the slideshow!

What is the best technology to drive your slide show?

The question is, is a Javascript (or Flash) driven slideshow your best option? Whether you use Javascript or Flash you visitor needs either a third party plugin, or a third party Javascript library loaded into their browser before the slideshow will work.

Introducing CSS animations

The alternative, a CSS3 driven animation offers the advantage that the animation code is included in the page, no calls to anything external, so a faster page load. In principle this technology also offers better cross-platform implementation. Being part of the W3C specification for CSS3/HTML5, all browsers will someday be able to run this – the only remaining question is should you be using it now?

We’ve been very pleased to see how well CSS3 based animations are now implemented – our tests indicate that all current browsers support this technology [1].

We’ve found CSS3 animations to be quite easy to write – so we can focus on what we want to do, rather than how to do it (and keep costs down).

Being a core part of the HTML specification, it is quite easy to offer alternative content, if a visitor is using an older browser.

We’ve been working on the technology for a while, our first public implementation is now available on the Electronic and photonic molecular materials research group website:

Electronic and photonic molecular materials research group, University of Sheffield.

And the future?

CSS3 animation is good, and can take on the role of a simple slide-show without problem, as well as adding some nice interactive effects to the page. Clearly it is a technology that we will be developing with our clients over the coming years.

A more complete web animation platform, however, will rely on the integration of CSS3 with Javascript and SVG graphics [2]. These technologies are also in active development at CookandKaye.

[1] Current versions of Firefox, Opera and Internet Explorer support CSS3 animations as native, Chrome and Safari still currently require the proprietary -webkit- prefix.

[2] SVG or ‘scalable vector graphics’ are pictures based on mathematically defined curves. They need very little bandwidth – so they are quick to download, but they are also scalable – so you can expand a picture made up of them as much as you like without it breaking up. This is useful if you want to use the same graphic for a phone (perhaps 600px wide) and a wide screen monitor (2400px or more across).