Star Wars intro using CSS3 and HTML5 | Hacker News Reader

Star Wars intro using CSS3 and HTML5

gesteves.com

23 pointsJanHancic24 comments

This is exactly why I think the future is in Flash / Silverlight and not in html. It takes 10 years for the next version of html to arrive, and this is what it can do? Flash and Silverlight has a development cycle of 1 year. With a beta every few months... The things you can do with these technologies, and the ease of development is unmatched by html. Also - in a way, these technologies have more cross platform potential than html - no different browser implementation, different APIs and different behaviors.

Just my 2 cents.

In Opera and Firefox nothing happens, and it's quirky in Chrome. IE is hopeless.

Safari-centric web design does no one good.

I agree, this is not something I'd use for everyday work, unless it was for something purely cosmetic that degraded gracefully. But also keep in mind that this is also very recent stuff (3D transforms were only introduced in July[1], for example,) and they're being proposed as a standard[2], so while there's not much point in using these features today, it might make a lot more sense in the future if other browser vendors implement them.

[1]: http://webkit.org/blog/386/3d-transforms/ [2]: http://www.w3.org/TR/css3-3d-transforms/

I think when it comes to animated content like games, Flash/Silverlight is here to stay but HTML5 introduces a vast amount of new features (that you probably know of) that will target an entirely different media.

I have faith in HTML5 because of how hard Google is pushing it. I think with a behemoth like them behind it, it will propel much quicker than the 10 year cycle we're used to. Atleast, I hope so :)

Sounds like the opposite of Amara's Law: "We tend to overestimate the short-term impact of technological change and underestimate its long-term impact."

Very little has to go before Flash gets a hard time: see how little it has hurt the iPhone that it doesn't do flash.

For me, it crashes Firefox 3.5.4 on Snow Leopard.

All messed up in Chrome, but it runs: Star Wars logo doesn't shrink to the distance, but just stays on screen and then disappears. Episode text is all scrunched up.

Safari 4.0.4, on 10.6, worked just fine.

Obviously we are going to need an Acid test for Canvas.

This doesn't use Canvas, only CSS. And there is only 1 line of JavaScript code, to delay the playing of the music.

Not a big deal, but it also fails on IE 7.

You are right. This is done with webkit-specific animations, transitions, and 3D transforms, which Apple has proposed as modules for CSS3. As all of these modules have yet to reach the status of recommendations, I think that the title of this post is a bit deceiving. For now I have to call this a proprietary webkit demo.

It crashes FF 3.5.5 on Snow Leopard too. Someone is going to have fun with it.

Crashing FF seems fairly unacceptable, you'd think it would just render it incorrectly.

I never thought I'd be able to select text from the Star Wars opening crawl... while it was crawling.

Why does it need to "store data on my computer for offline use"?

FF 3.5 on Kubuntu gives me that warning that I haven't seen before. Looks very dodgy.

I'm using HTML5's AppCache to store the music, images and fonts locally and make sure they load from the cache on successive loads, in a desperate attempt to reduce the amount of bandwidth this thing is consuming. (I've already used 6GB just today.)

You can read more about it at Apple's developer site: http://developer.apple.com/safari/library/documentation/iPho...

Google had a nice overview of it, too: http://googlecode.blogspot.com/2009/04/gmail-for-mobile-html...

I really need to get into HTML5, I hadn't heard of "appcache" before. Can anyone suggest a resource on this?

The ones I just posted.

Using AppCache to launch offline, part 1: http://googlecode.blogspot.com/2009/04/gmail-for-mobile-html...

Using AppCache to launch offline, part 2: http://googlecode.blogspot.com/2009/05/gmail-for-mobile-html...

Using AppCache to launch offline, part 3: http://googlecode.blogspot.com/2009/05/gmail-for-mobile-html...

HTML 5 Offline Application Cache: http://developer.apple.com/safari/library/documentation/iPho...

I don't think the anaesthetic has entirely worn off yet ... thanks for your patient response.

Heads up, looks like non OS X 10.6 Safari users may have a problem with the experience.

It works fine on the latest WebKit nightly on 10.5.

It's quirky in Chrome, but I'm still impressed. While I agree with some others regarding how easily Flash or Silverlight could do this, I think there is something to be said that this is (hopefully) going to be a standard that doesn't require plugins. Yes, the flash install base is massive and yes jQuery's usage is growing rapdily, but it's going to be nice to be able to do some of the more trivial things directly in HTML and CSS. Especially if those few trivial UI elements are the only thing you would have included flasy or jQuery for.

Safari 4 on 10.6, no problem.

On another note, did anyone else site through all of the credits just to see if a rebel blockade runner would actually be rendered?

More like "Star Wars intro using Webkit CSS extensions (need Safari)"

This made my morning.

I was impressed with the load time.

Reply on news.ycombinator.com