Star Wars opening crawl in HTML & CSS

I wanted to see if I could recreate the opening crawl from Star Wars with only HTML & CSS, using WebKit's support for CSS 3D transforms and CSS animations. This is what I came up with: I'm only using JavaScript to delay the start of the music; everything else is done strictly with CSS. If you have Safari 4 or the WebKit nightly on Snow Leopard, you can try it at http://www.gesteves.com/experiments/starwars.html

Category:

Film & Animation

Tags:

• web design
• web development
• html
• css
• star wars
• css3
• html5

[YoussefS]

wow wow wow, this is so cool! i'm seriously impressed. did it take long dude?

[gesteves]

Couple of hours.

[RealGoonieKid]

@dcho23 not hating. just sayin.

[RealGoonieKid]

@dcho23 html5 and css3 are new(newer) technologies. why would we want to use flash when it looks different in every browser known to man?

[jbeihl1]

Ok does anyone here know how I would prepare a file with movable objects created using Flash CS4 to animate as an I-PAD App? I am making an I-PAD App and I need to know how you would prepare a file with multiple Flash layers to move on the IPAd app

[dcho23]

@gesteves probably take you a couple of minutes if you used Flash ;) Nice work regardless though.

[14jamalk]

great job man!

[rikard92]

you are good at to programing some sites

[Skycamper]

yes safari does support html 5 : o

[gentrelane]

It's like the aftermath of some amazing geek orgy.

[outerpol]

mobilesafari supports it but not safari lol

[prostovanka]

How can you forward play/pause or rewind?