8 ms·
Impressive html5/css3 clock; no Flash.
- clemst 15y agoAlso, 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 15y agoActually, if you even just switch tabs for a few seconds and return it does the same.
- 51Cards 15y agoIt's just if the tab looses focus for more than a second or two it closes.
- joejohnson 15y agoIn 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 15y agoI despise that they added that extra background in Lion
- duiker101 15y agothis would be impressive even if it was flash.... very nice!
- edd 15y ago2.3MB of data for a one page site! While its pretty that is crazy big!
- k33n 15y agoI 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 15y agoIt 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 15y agothis can be greatly improved (losslessly) using http://punypng.com http://punypng.com / http://www.smushit.com/ysmush.it/ 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 15y agois that better than pngcrush? http://pmt.sourceforge.net/pngcrush/ http://pmt.sourceforge.net/pngcrush/
- JonnieCache 15y agoI've always had good results with pngout
- bilban 15y agoNot to mention that it canes my cpu at 73%. What a waste of time.
- jpdoctor 15y agoTrying to imagine how that got put together. It looks like it involved a lot of patience.
- alexholehouse 15y agoCould be wrong, but doesn't seem to work in Chrome under Ubuntu.
- trafficlight 15y agoChrome 15 and Ubuntu 11.04 for me and it doesn't work. Firefox 7 does though.
- morsch 15y agoChrome 16/Ubuntu 11.04 works.
- alexholehouse 15y agoYeah sorry - it's all good, I'm not sure what the problem was. My bad, false alarm etc. :-s
- ramchip 15y agoI'm on Opera and I don't see anything clock-like.
- gnoupi 15y agoSame 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 15y agochecking out the source i noticed all the hrefs are missing http:, how does that work, whats the purpose of this? <link rel="stylesheet" href="//aprilzero.s3.amazonaws.com/a0/lib/c/styles.css">
- edd 15y agoIt 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.
- mattmanser 15y agoI 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?
- Semiapies 15y agoI 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.
- mattmanser 15y agoNo point in that configuration though as your browser will report the site as insecure.
- karl_nerd 15y agoPaul Irish blogged about it a while ago http://paulirish.com/2010/the-protocol-relative-url/ http://paulirish.com/2010/the-protocol-relative-url/
- mattmanser 15y agoFor 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.
- deleted 15y ago[deleted]
- darrenkopp 15y agoIt'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 15y agoI know this may be hard to understand, but pretty is an end unto itself. You don't need any better use.
- dbattaglia 15y agoExactly... 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!
- kinofcain 15y agoApple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page: http://www.apple.com/ipodnano/ http://www.apple.com/ipodnano/
- dougaitken 15y agoumm where?
- davidcollantes 15y agoMickey Clock.
- flixic 15y agoThe Mickey Mouse clock.
- Luc 15y agoFor 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 http://www.apple.com/ipodnano/images/overview_hero.jpg
- innes 15y agoDoesn'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.
- jjcm 15y agoIf you look at the code it only has webkit bindings. It fails gracefully however in trident/presto/gecko, so no real issues in my opinion.
- onedognight 15y agoExcept 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; }
- pavel_lishin 15y agoI got tired of waiting for some resources to load and staring at a puckered anus: http://i.imgur.com/9NGQS.jpg http://i.imgur.com/9NGQS.jpg
- oni0n56 15y agoSorry, should be fixed now.
- obeattie 15y ago<meta property="og:description" content="A ducati-inspired HTML5 experiment. For a fun time, try it on a retina display (pinch to open and close)."/>
- obeattie 15y agoThere's also another version of it on http://charmseven.com/ http://charmseven.com/
- revscat 15y agoThe 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 15y agoYou 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 15y agoThanks 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 15y agoAlthough 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 15y agoUse 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 15y agoOne of the stamps at the bottom means "Retina Display support". That's probably why the texture are so high-res.
- prat 15y agolooks great! only if you could make the gears move:)
- onedognight 15y agoThe gears do move!
- prat 15y agoI am using firefox 5.. they don't appear to move in my browser.
- sequoia 15y agoIt 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.
- oni0n56 15y agoClosed 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!
- sequoia 15y agoBy 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_ 15y agoYes 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.
- thomasxiii 15y agoBuilt an analog CSS clock of my own without the use of any pre-rendered images (http://attasi.com/experiments/analog-clock/ 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 15y agoExcept your version doesn't work on Firefox because I lack "webkit". You may as well have written it in Flash, or VBScript.
- thomasxiii 15y agoI 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.
- noduerme 15y agoIt'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 15y agoI 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.
- noduerme 15y agoYeah, 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.
- flashmedium 15y agoa preloader would be nice...
- spiralganglion 15y agoThis 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 15y agoI'd love to add this type of tech to our online alarm clock site (http://sleep.fm 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 15y agoVery very cool! :)