Impressive html5/css3 clock; no Flash.

by philipDS • 15 years ago

210 86 15 years ago

clemst• 15 years ago

Also, in chrome, try to inspect the DOM using the built-in inspector: the diaphragm will close. If you click again inside the window, it'll open again.

Pretty impressive.

elliottcarlson• 15 years ago

Actually, if you even just switch tabs for a few seconds and return it does the same.

51Cards• 15 years ago

It's just if the tab looses focus for more than a second or two it closes.

joejohnson• 15 years ago

In the new Chrome beta for Mac, when you pull the page down too far to see the grey browser background, Chrome messes up and the background appears as a smear of red.

artursapek• 15 years ago

I despise that they added that extra background in Lion

duiker101• 15 years ago

this would be impressive even if it was flash.... very nice!

edd2• 15 years ago

2.3MB of data for a one page site! While its pretty that is crazy big!

k33n• 15 years ago

I wouldn't say it's crazy big. Bigger than 99% of one page sites? Sure. I've got a 50mbps connection and even with a far slower one, this would only take a few seconds to load.

bmelton• 15 years ago

It took me a couple of minutes on a 3G cellular connection.

It was worth the wait, for sure, but due to the way it rendered, I felt like I had to watch the whole thing because I didn't want to miss something neat.

It could (and should) definitely be optimized a lot, but as a proof of concept, I'm not going to quibble over file size, even if I'm negatively impacted.

asuth• 15 years ago

this can be greatly improved (losslessly) using http://punypng.com / http://www.smushit.com/ysmush.it/ / downloadable PNG recompressing software. I tried it on several files on this site and some decreased in size by more than half.

malkia• 15 years ago

is that better than pngcrush? http://pmt.sourceforge.net/pngcrush/

bilban• 15 years ago

Not to mention that it canes my cpu at 73%. What a waste of time.

jpdoctor• 15 years ago

Trying to imagine how that got put together. It looks like it involved a lot of patience.

alexholehouse2• 15 years ago

Could be wrong, but doesn't seem to work in Chrome under Ubuntu.

trafficlight• 15 years ago

Chrome 15 and Ubuntu 11.04 for me and it doesn't work. Firefox 7 does though.

morsch• 15 years ago

Chrome 16/Ubuntu 11.04 works.

alexholehouse2• 15 years ago

Yeah sorry - it's all good, I'm not sure what the problem was. My bad, false alarm etc. :-s

ramchip• 15 years ago

I'm on Opera and I don't see anything clock-like.

gnoupi• 15 years ago

Same here, starting to get used to that. None of the "cool effect" sites I click recently work directly on Opera.

Guess it's soon time to resign from that browser. I love it, but it's just getting tiring to have to use "open with chrome" with so many sites.

seanalltogether• 15 years ago

checking out the source i noticed all the hrefs are missing http:, how does that work, whats the purpose of this?

edd2• 15 years ago

It is a protocol relative url. This way if you are looking at the site over https then the assets will also come down over https.

mattmanser3• 15 years ago

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?

brlewis• 15 years ago

It's a network-path reference as defined in RFC 2396. The purpose is to fetch styles/scripts/images by https if the page is fetched by https.

darrenkopp• 15 years ago

It'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.

jxcole• 15 years ago

I know this may be hard to understand, but pretty is an end unto itself. You don't need any better use.

dbattaglia• 15 years ago

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!

kinofcain2• 15 years ago

Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page:

http://www.apple.com/ipodnano/

dougaitken• 15 years ago

umm where?

davidcollantes• 15 years ago

Mickey Clock.

flixic• 15 years ago

The Mickey Mouse clock.

Luc• 15 years ago

For me it's just showing a static image, no matter what browser I use. This one: http://www.apple.com/ipodnano/images/overview_hero.jpg

innes• 15 years ago

Doesn't work on any of the three browsers on my laptop - presumably it works on Apple's browser. Kudos to Apple on going the extra mile there.

onedognight2• 15 years ago

Except it's not just CSS; It uses Javascript to update a CSS transform element

    -moz-transform: rotate(%ddeg)

whereas the OP uses CSS animations.

    .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;
    }

kinofcain2• 15 years ago

Good catch, though for what it's worth Apple's actually has the correct time on it. Hers appears to be doing some initial date/time setup via JS, but it doesn't appear to show the correct time, at least for me.

pavel_lishin• 15 years ago

I got tired of waiting for some resources to load and staring at a puckered anus: http://i.imgur.com/9NGQS.jpg

oni0n562• 15 years ago

Sorry, should be fixed now.

obeattie2• 15 years ago

obeattie2• 15 years ago

There's also another version of it on http://charmseven.com/

revscat• 15 years ago

The most impressive bit of HTML5 I have run across lately is turntable.fm. Yes, I'm probably late to this particular party, but I was very impressed when I realized the interface is done entirely in HTML5.

So, to turntable.fm devs: good job!

fredugolon• 15 years ago

You just have to get around the fact that they don't seem to be handling scaling very well and, as a result, the site becomes defunct every few minutes.

ootachi• 15 years ago

Thanks for adding the -moz prefixes too! (Yes, Firefox supports CSS3 animations now; most web developers only use the -webkit prefixes though, sadly. Glad to see this is changing.)

wowzer• 15 years ago

Although unbelievably impressive. This kind of shows me the opposite of what the site was going for. Although the new protocols give us a lot more freedom of expression with animation support. The browser rendering time is just not there yet. Any browser that can handle that clock in a reasonable amount of time also has flash on it.

JoelSutherland• 15 years ago

Use your browser's zoom tool to see it up close. Most of the textures are higher-res than needed. It looks pretty good even zoomed way in.

elisee• 15 years ago

One of the stamps at the bottom means "Retina Display support". That's probably why the texture are so high-res.

prat2• 15 years ago

looks great! only if you could make the gears move:)

onedognight2• 15 years ago

The gears do move!

prat2• 15 years ago

I am using firefox 5.. they don't appear to move in my browser.

sequoia2• 15 years ago

It seems like if you wait long enough the gears start moving. On Chrome I just saw the closed aperture for several minutes and gave up, on FF I saw the arm and pendulum moving but that's all, 'til I came back several minutes later and the gears were moving. Haven't been able to get that "gear moving" effect again tho. I think file-size/load-time is actually a problem in this case, even as an art piece, as it's taking so long to load I'm not even seeing the art.

A couple other things: the apple clock is using javascript as well, not just css3 (tho they could if they tried). This one... I didn't dig far enough to see if it's used anywhere in the clock but the hands and pendulum are just css. Remember kids, html + css + javascript != "CSS3" :)

Further, HTML5 is nice but it's being used pointlessly here: <article class="layer zero"> <div class="blurred gear one"></div> <div class="blurred gear two medium reverse"></div> <div class="blurred gear three large"></div> </article> This is an "article?" HTML5 to add semantic meaning is good, using it for no reason... I don't see the point. Overall, KUDOS to the designer/developer! Extremely impressive regardless of any of this.

oni0n562• 15 years ago

Closed aperture issue should be fixed now.. (was an issue with the analytics platform going down due to traffic, not the size of images (though that is of course pretty big))

And thanks for all your feedback!

sequoia2• 15 years ago

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

corin_• 15 years ago

Yes you are wrong, the cogs turn the pendulum's speed into three different speeds - one for each hand. Some/most/all (not sure) clocks with pendulums have weights that allow you to alter the weight on the pendulum to adjust if your clock is running too slow or fast.

thomasxiii2• 15 years ago

Built 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.

rjh29• 15 years ago

Except your version doesn't work on Firefox because I lack "webkit". You may as well have written it in Flash, or VBScript.

thomasxiii2• 15 years ago

I know :/

It's written only for webkit because I don't have the time to cross-browser check experiments. Can't wait until we don't need browser prefixes.

noduerme5• 15 years ago

It'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?

nupark2• 15 years ago

I have to agree. Would anyone be impressed if I did this in ObjC / CoreAnimation? It would be simple enough.

Posts like this remind me of the old "year of the Linux desktop" crowd: People demonstrating how Linux can (often poorly) do the baseline simple things that other operating systems have been doing for years or decades.

Meanwhile, those other desktop operating systems were leapfrogging ahead.

noduerme5• 15 years ago

Yeah, the only difference being that every company besides Adobe is choosing this as the new web standard -- instead of doing what they should do, which is writing browsers compatible with ECMA-4/5 standards, and making either AS3 or JS2 built in with a genuine screen graph so animations don't have to be tied to this absurd 1994-era DOM for the next decade or longer. Short of that, they should allow any and all plugins necessary to run what users want to run, and stop their campaign of demonizing Flash. I realize Apple's made millions off breakout games that people downloaded because they were blocked from playing the free versions in Safari, and I don't blame them for being Machiavellian about it, but I also don't see a reason to feed the beast by pretending everything's hunky-dory with the ramshackle decaying non-cross-platform crap they've left developers to work with in the webkit/HTML5 stack.

Cieplak• 15 years ago

Linux is a kernel, not an operating system [trolling]

millions• 15 years ago

>Meanwhile, those other desktop operating systems were leapfrogging ahead.

I think this is quite fitting for how Flash is developing out of the spotlight now as well. I think that the Flash exodus - if it will mean less designers doing ridiculously processor intensive banners - ultimately is beneficial for the future of the technology itself.

shock-value• 15 years ago

Good point.

Off topic: Do people really write games for iOS fully in Objective-C? Why not just stick to C++ for everything except the graphics (which would use the regular C OpenGLES API) and the bare minimum of Obj-C to interface with iOS (main game loop, etc)? You get a better language (IMO) and much easier portability.

myspy• 15 years ago

Nope, games are written in C++ just like you described it.

sirn• 15 years ago

I don't think that's the right analogy. You're comparing tool with a technology. Adobe's tool already did all the hard part for you when you write for Flash. HTML5 can be the same too, once its tool matured enough.

Not to mention equivalent of this implementation in Flash would be equally complex. (No JS/No ActionScript.)

noduerme5• 15 years ago

If that's true, then someone's ability to rewrite the tool is academic. And if it's academic, then this isn't impressive. My point is that it's impressive only in the sense that it rewrites the tools.

I can rewrite Adobe's tools in JS 1.5 and CSS3. I went a long way towards doing it - I wrote a whole platform. http://strikedisplay.blogspot.com. Mainly because I was scared of losing the tools I like to have around. But after gaining what I think is a pretty granular, deep understanding of which operations take longer in one or the other (pretty much everything takes longer in JS 1.5), and the trade-offs in other kinds of operations -- the only good thing about HTML5 is that you can force multithreading to suck up an even larger chunk of cycles, a fact that won't be lost on the porn/malware mafia.

samstave• 15 years ago

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

This is such an important point. And very illustrative of the attitude of Apple.

If any other company did this, they would be villified far and wide. But because we like apples products - it is overlooked.

It is a cunning business move.

doomlaser5• 15 years ago

This is not true at all. Jobs didn't include Flash on the iPhone because of its performance requirements.

Apple didn't realize how important the App Store would be to the device's popularity when the iPhone initially launched. It appeared that the intent was to keep it a closed, curated platform where only Apple and its partners could ship products for it. This was the strategy that they had established for third party iPod clickwheel games.

In fact, Apple initially raved about how great "Web Apps" would be on the device, and showcased crude web based games at WWDC 2007.

It was largely due to developer outcry that Apple responded with the App Store, and it was a much larger hit than anyone predicted. The business savvy was in their ability to roll with it.

azulum3• 15 years ago

this argument, seriously?

have you ever seen flash run well on ARM? are you really comparing casual flash games that you have to pay for to casual obj-C sold through the appstore, a store that basically pays for itself and doesn't make much money?

and i love how you can just quash anything that demonstrates how HTML5, a nascent technology, is moving toward par with flash while not sending fans into overdrive and draining my battery. all to keep an ailing steve jobs happy.

so tell me, what's the point your post?

get over your uppity, unimpressed self.

flashmedium• 15 years ago

a preloader would be nice...

spiralganglion• 15 years ago

This was super cool on my laptop. But there was mention of HTML5/CSS3, so I just had to check it out on every mobile device I had handy. Uh oh...

Doesn't work on Android phone (3.2.6, Nexus One). Pendulum only runs a half cycle, hour/minute hands don't move at all and point to incorrect time. Low frame rate overall. Loads in different places on the screen, including half-way off the right edge, depending some factor I haven't yet deduced (zoom level, perhaps?). Doesn't allow any panning or zooming once loaded.

Doesn't work on Windows phone (Mango, LG Optimus Quantum). Pendulum animation doesn't run at all.

Works beautifully on iPad 1 in landscape. In portrait, background shows a visible seam around the clock.

I really like the design, and appreciate the effort. I just find it a little bit kooky that the OP promotes the non-use of Flash, touting instead technologies that are supposed to work much better (or at all) on mobile devices. It's Alanis Morissette Irony.

paul9290• 15 years ago

I'd love to add this type of tech to our online alarm clock site (http://sleep.fm). Though and correct me if Im wrong - HTML5 doesn't have a cross compatible audio solution available; one as solid as flash?

Legend• 15 years ago

Very very cool! :)

Impressive html5/css3 clock; no Flash.

Related Stories