Impressive html5/css3 clock; no Flash.
aprilzero.com
aprilzero.com
-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;
}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.
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.
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.
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.
And thanks for all your feedback!
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.
So, to turntable.fm devs: good job!
/me goes back to critiquing the physics of minecraft. :p
<link rel="stylesheet" href="//aprilzero.s3.amazonaws.com/a0/lib/c/styles.css">
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?
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.
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.
Pretty impressive.
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?
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.
You haven't been paying attention to Adobe's latest moves with Flash.
http://tv.adobe.com/watch/flash-platform-in-action/console-q...
http://www.gamasutra.com/view/news/37678/Epic_Games_Unreal_E...
And what's more, check out their W3C proposal for CSS Shaders, a feature which they are partners in with Apple:
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.
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.
Not to mention equivalent of this implementation in Flash would be equally complex. (No JS/No ActionScript.)
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.
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.
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.
Both Flash and Canvas are moving towards GPU accelerated rendering pipelines, and Adobe is also making proposals on the HTML5 side, like CSS Shaders, but that's a separate discussion.
My beef was the idea that Apple knew that third party games would be one of the most popular draws to their iOS products. Nobody did (except perhaps game developers themselves).
I'm not sure it does take 5x as much processing power, especially when you can ship things off to the GPU. You have to remember that these decisions were made a few years ago, and Adobe Flash video on mobile (where available) has always lacked the performance of native apps/HTML5 video.
The loss of video to native browser technologies takes nothing away from the things Flash has to recommend it as a method for blitting graphics to the screen. It's one thing to try and do it with canvas and divs in Safari -- it's a joke getting things to line up, but it's not impossible. But if you want it to look the same in IE? A guy's supposed to run a startup and worry about Firefox reversioning every 4 weeks at the same time? Realistically, if I wasn't running my app in Flex I wouldn't have a company; I'd have a giant pile of IF IE statements and a bigger list of complaints.
So this clock is where the rubber meets the road, in a funny experimental way. It's got "no flash" in the title, so we can assume this is where an HTML5/JS proponent with some coding savvy thinks the line should be drawn; this is what can be achieved with the technology available cross-browser given the state of the DOM art. And I'm not saying it's bad. I'm just saying that it's nonsensical to throw out good tools to prove you can do something with bad ones.
The outcry was so fierce and sustained that around 3 months later, Apple backpedaled on this strategy and Jobs himself announced that they would open the platform up.
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.