Wikidot Design & Development

Animated page entry with CSS3

Create a subtle yet effective page load effect with pure CSS3.

With the continued development of modern browsers, more and more things are possible with CSS3 animations, and they grow ever more complex. Yet it is the simple things that may be most effective in enhancing user experience. Today we’ll look at one of these very simple ways of using CSS3 animations - using them to progressively fade in a page’s content.

Building on the example used by Apple recently with the release of the Beatles on iTunes, we’ll build a very simple ‘teaser’ page that fades in.

Creating a pure CSS content slider

A simple content slider. No javascript. No flash. Just HTML and CSS3. Oh, and a bit of BMC.

When I was redesigning the homepage for this site, I really wanted to include a simple content slider that would integrate easily with the wikidot syntax and allow the content of the slides to be changed without much thought required, and possibly even automatically with the ListPages module. I have tried getting many javascript and jQuery sliders to work with wikidot, but the amount of time required to get them working properly, and their lack of integration with other parts of the site, put me off them. That, and my very limited knowledge of javascript. So I turned to something I am familiar with, even quite adept at, to create the slider. CSS3. (If you haven’t figured it out yet, the three boxes on the homepage slide to the left if you’re using Safari or Chrome). I know what you’re saying now. CSS3 only works in some browsers! The slider only works in Safari & Chrome! What good is that? Well, read on for my reasoning…

CSS slider preview

So yes, the slider does only work in Safari and Chrome because it uses webkit animations to slide the boxes. But that doesn’t mean it looks like a jumbled-up mess in other browsers. The slider is designed so that even without the animation, it still looks great and incorporates well with the rest of the site. It even looks good in IE6!
When viewed in a non-webkit browser, the user simply sees the first three boxes. When viewed with Safari and Chrome, those first three boxes slide to the left after 25 seconds to reveal another three boxes. This means there is some content on the page that only a limited number of visitors will be able to see, but my reasoning was as follows: the content of the boxes is merely there to promote other parts of the site. There’s nothing in those boxes that is integral to user experience; they’re just glorified links. The animation enhances the user experience for those with modern browsers, as they deserve. And if something important needed to be put in the boxes, I can just place it in the one of the first three - everyone can see those three boxes.
Well, enough explaining myself, lets get on to the juicy stuff…

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.