

Star Wars intro using CSS3 and HTML5 - JanHancic
http://www.gesteves.com/experiments/starwars.html

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

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

Safari-centric web design does no one good.

~~~
gesteves
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/>

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

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

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

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

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

~~~
gesteves
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...](http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html)

Google had a nice overview of it, too:
[http://googlecode.blogspot.com/2009/04/gmail-for-mobile-
html...](http://googlecode.blogspot.com/2009/04/gmail-for-mobile-html5-series-
using.html)

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

~~~
gesteves
The ones I just posted.

Using AppCache to launch offline, part 1:
[http://googlecode.blogspot.com/2009/04/gmail-for-mobile-
html...](http://googlecode.blogspot.com/2009/04/gmail-for-mobile-html5-series-
using.html)

Using AppCache to launch offline, part 2:
[http://googlecode.blogspot.com/2009/05/gmail-for-mobile-
html...](http://googlecode.blogspot.com/2009/05/gmail-for-mobile-html5-series-
part-2.html)

Using AppCache to launch offline, part 3:
[http://googlecode.blogspot.com/2009/05/gmail-for-mobile-
html...](http://googlecode.blogspot.com/2009/05/gmail-for-mobile-html5-series-
part-3.html)

HTML 5 Offline Application Cache:
[http://developer.apple.com/safari/library/documentation/iPho...](http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html)

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

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

~~~
docmach
It works fine on the latest WebKit nightly on 10.5.

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

------
theli0nheart
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?

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

------
JanHancic
related article: [http://ajaxian.com/archives/star-wars-html-and-css-a-new-
hop...](http://ajaxian.com/archives/star-wars-html-and-css-a-new-hope)

------
jamesbressi
This made my morning.

I was impressed with the load time.

