Blog on hold: This blog is currently on hold. Please visit thoughts.keranmckenzie.com for new blog posts

Watch Keran's YouTube Channel #theRandomnessProject


Post Pic

CSS Analog Clock – your turn

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

I’ve been playing around lately with some CSS & Javascript .. slowly brushing up and improving my skills. I’m quite happy with where I’m pushing myself & what I’m doing. Nothing overly flash mind you … but still.

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?)

Your Turn

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.

Challenge 1
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.

Challenge 2
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)

Support Studiowhiz.com

One Response

[...] This post was mentioned on Twitter by CenterNetworks, Keran McKenzie. Keran McKenzie said: Wrote a blog post on my CSS Clock – http://bit.ly/9n3sHo – will try and find a prize or two to add to the challenge (please RT) [...]