Is it possible to create an entire animate analog clock using nothing but CSS (& a little jQuery to simply update the CSS?) … lets take a look and find out
The other day we were talking at work and I’d mentioned I’d drawn a clock using ONLY css & that I wasn’t using the new HTML 5 canvas tag to do it. One of the guys wanted to see it, so I figured I might as well put some jQuery too it an animate it.
Check it out – 100% CSS Analoge Clock, powered by jQuery.
Now there are some cavets with this clock. First up it makes use of “border-radius” in the CSS spec to do a lot of the drawing. This of course just doesn’t work in IE at all, so that rules out 70% of the internet.
Next up, I use the “transform” feature of CSS3 to rotate key elements within the clock – again this is only webkit (Safari & Chrome) and Firefox compatible – so that rules out Opera (although I have heard Opera can support this – anyone care to test?)
One of my friends challenged me to add a little extra animation to this – but I can’t seem to get it to work, so I figure I’ll extend the challenge to you.
Modify the animation so that instead of the second hand simply snapping from place to place, it overshoots slightly, then bounces back and finally comes to rest. It’ll make it a little more realistic. My thinking here was overshoot by +5, drop back by -3, then stop.
The shadow on the hands is wrong, can you come up with a formula (or function) that would move the shadow correctly as the hands move around the clock. Assume the light source is directly on top (shining on the 12). This should be achievable, simply by altering the numbers on the box shadow in the CSS.
Go on, have a play – can you push this clock to the next level?
100% CSS Analoge Clock, powered by jQuery – simply view source for all the details, have fun & remember to post your response in the comments (or ping me & I’ll add a link here)