Star Wars intro using CSS3 and HTML5(gesteves.com)

23 pointsby JanHancichá 17 anos24 comments

http://www.gesteves.com/experiments/starwars.html

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

treborhá 17 anos

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

Safari-centric web design does no one good.

gesteveshá 17 anos

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/

trueboskohá 17 anos

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 :)

silvestrovhá 17 anos

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.

teilohá 17 anos

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.

JanHancichá 17 anos

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

teilohá 17 anos

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.

Retrichá 17 anos

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

tvonhá 17 anos

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

Nogwaterhá 17 anos

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

jonhohlehá 17 anos

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

pbhjpbhjhá 17 anos

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.

gesteveshá 17 anos

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

pbhjpbhjhá 17 anos

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

gesteveshá 17 anos

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

pbhjpbhjhá 17 anos

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

jamesbressihá 17 anos

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

docmachhá 17 anos

It works fine on the latest WebKit nightly on 10.5.

WesleyJohnsonhá 17 anos

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.

theli0nhearthá 17 anos

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?

Semiapieshá 17 anos

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

JanHancichá 17 anos

jamesbressihá 17 anos

This made my morning.

I was impressed with the load time.