By the way, did anyone else notice that the pendulum completes a cycle every 1.3 seconds? Am I wrong or would this make your clock run very slowly?
/me goes back to critiquing the physics of minecraft. :p
Impressive html5/css3 clock; no Flash.
41–50 of 89 posts
Re: Impressive html5/css3 clock; no Flash.
#42Built an analog CSS clock of my own without the use of any pre-rendered images (http://attasi.com/experiments/analog-clock/). Surprisingly, keeping time with CSS is far more accurate than with JS. The animation is also waaaay smoother.
Re: Impressive html5/css3 clock; no Flash.
#43Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page: http://www.apple.com/ipodnano/
Except it's not just CSS; It uses Javascript to update a CSS transform element
-moz-transform: rotate(%ddeg)
.hand {
-moz-animation-direction: normal;
-moz-animation-duration: 60000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-timing-function: linear;
}
.hour.hand {
-moz-animation: 0s ease 0s normal none 1 none;
}
.minutes.hand {
-moz-animation: 0s ease 0s normal none 1 none;
}Re: Impressive html5/css3 clock; no Flash.
#44looks great! only if you could make the gears move:)
The gears do move!
Re: Impressive html5/css3 clock; no Flash.
#45Could be wrong, but doesn't seem to work in Chrome under Ubuntu.
I'm on Opera and I don't see anything clock-like.
Re: Impressive html5/css3 clock; no Flash.
#46Earlier quoted context omitted.
I was pondering today why no-one really knows about or even uses it. As a bit of a general question to everyone, did old browsers not support it or something? Or do people prefer using relative urls over absolute style ones?
I had to be told, years back, so I think it's just an assumption. Also, for those pesky secured sites that have unsecured static assets on a separate server, it might be that those servers aren't configured for SSL.
No point in that configuration though as your browser will report the site as insecure.
Re: Impressive html5/css3 clock; no Flash.
#47It's also a terrible clock. It is incredibly hard to figure out the actual time when you have to look in 3 separate places for each part of the time. It's pretty, but borderline useless, just like flash.
I know this may be hard to understand, but pretty is an end unto itself. You don't need any better use.
Exactly... I don't think anyone in their right mind would write a clock webpage to seriously replace the built-in system clock on every PC/device out there!
Re: Impressive html5/css3 clock; no Flash.
#48Re: Impressive html5/css3 clock; no Flash.
#49Earlier quoted context omitted.
I was pondering today why no-one really knows about or even uses it. As a bit of a general question to everyone, did old browsers not support it or something? Or do people prefer using relative urls over absolute style ones?
Paul Irish blogged about it a while ago http://paulirish.com/2010/the-protocol-relative-url/
For those interested, the reason the old google analytics snippet wasn't using this instead of document.write:
There is an edgecase bug in IE6 that causes a dialog to blow up… under some security settings (unsure if they are default) when requesting form the non-'ssl' subdomain
So looks as if it's fine to use if you're not supporting IE6.
The new GA snippet uses different domains for the two modes so it can't be used.
Re: Impressive html5/css3 clock; no Flash.
#50It's cool. But let's admit it wouldn't be impressive if it were written in Flash...because Flash makes it relatively trivial to write something like this.
So is it only impressive because it doesn't use Flash? And if so, what does that say about how wise a decision it is to start trying to replicate complex animation in Javascript, CSS3 and Canvas, just to keep Steve Jobs happy?
Arguably, Jobs chose to eliminate Flash from the iPhone specifically so that casual games would have to be written natively and sold in the App store, and couldn't be played on the open web. Since Javascript runs at about 20% the speed, the reasoning was that the only decent games would have to be written in Obj-C. And that still holds true, despite legions of hackers trying to ride this HTML5 pig as if it's a thoroughbred stallion. It'll just never be up to the task. I could write this thing in about 3 hours in HTML5/CSS, not including modeling and rendering time. But that's also because everything in it has a centered pivot point. If it didn't, it wouldn't work in IE 6, 7 or 8.
So, nice job, but was the only point really to show that you can do something Flash-like in HTML5? If so, what's the point again?