If you can't see the clock below, visit the stand alone demo.
Technically, I had wanted to wait till it can display the actual time and perhaps ask some designer to polish it. But rather than keeping this lunch-break hack in a safe deposit box forever, let me just release this ugly clock transition (since everyone is on the animation frenzy). So far it works only if you use latest version of Safari, Chrome, Opera, Firefox. Canvas and/or VML fallback (which sadly will require JavaScript) for other browser are in the pipeline.
Basically it is another version of my previous morphing clock attempt (see the video). The principle is the same, except now I modified that C++ program to also output an HTML which renders the clock as above.
Also it morphs only once. Reload the page to enjoy the morphing once more. Maybe I'll find the time (in another lunch break) to toggle the two clock modes. Update: morphing from/to both analog and digital mode is implemented.
Like I said, it's a creepy, machine-generated, ugly looking clock. You've been warned, but feel free to write me anything (should you need to vent your anger).
6 comments:
Waaaa... its super cool... gonna really need this someday. gud job.
And a grey background to make it look like an old skool Java applet! Nice ;-)
Doesn't look good in FF 4 nightly. I get some weird frames; eventually it stabilizes to the expected result except that the point coords seem like half a pixel off, causing the curves to look strange.
@Benoit: Yes, FF4 is still rough on CSS transition.
Why would you choose tons of rotated divs instead of SVG which is built for this sort of thing?
@Jeff: As an example of CSS3 transition/animation.
Post a Comment