cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

I freaking love Star Wars, but could not find a web version of the original opening crawl from 1977. So I created this one.

I wrote an article where I explain how this works. Watch the Start Wars opening crawl on YouTube.

Stuff I used:

  • CSS (animation, transform)
  • HTML audio (the opening theme)
  • SVG (the Star Wars logo from wikimedia.org
  • JavaScript (to sync the animation/audio)

Thanks to Craig Buckler for his amazing article which helped me to create this remake of the Star Wars opening crawl.

Sound copyright by The Walt Disney Company.

Comments

  1. Just awesome! Well done Tim!

  2. I'm not star wars fan but this is just awesome Tim :D

  3. This just blew my mind, so great!

  4. Thanks @jackrugile! I want to watch Star Wars right now :D

  5. Hehe yeah. This got me thinking about what other movie scenes would be fun to replicate with html/css... I will think some more about it.

  6. GRAY GHOST @grayghostvisuals on

    \m/

  7. Where were the stars in the background ;) Great Job! Killed it!

  8. @johannaruiz This is called "flat design" :P And thanks :D (cc @grayghostvisuals & @fixcl)

  9. I don't have a great computer, this crashed it lol. Otherwise I love it. I went home onto my sweet rig and it performed like a champ. Good job!

  10. That's no moon. It's a space station. Well done!

  11. This is beautifully recreated!!! Love it!! Yeah, no stars, just the text from the opening sequence. I think the other star program would look awesome in HTML and CSS. Star Trek. :)

  12. This is the most awesomest thing I've seen to date :)

  13. Gizmodo, Boing Boing, Kottke, Hacker News... making the rounds!

    Gotta love Tim on the Hacker News thread too.

    Troll complainer : Rabble rabble rabble this is stupid and looks/works bad! Tim : How can I make it better? / Helpful answer

  14. @chriscoyier yeah it's just insane. And this buzz is mostly your fault :D Why? You remember my mail to the CodePen-Support? I asked if you guys could add a way to choose all the pens of a users showcase-view. You said no :D

    The only way to "control" the CodePens of the showcase-view is to gain more views on the pens itself, because that's the only thing that matters for the showcase.

    So I added this pen to Hacker News on Monday, even if it's from May 2013, and the people loved it.

    This method takes some time and luck, but I can finally "add" my favorite pens to the CodePen showcase-view :D HURRAY!

  15. yahhhh we might have to re-think that Showcase thingy. My own profile right now is a good example of it being annoying. I'm sick of looking at those Pens - they aren't even that cool =).

    So we'll have to discuss this with the larger community soon. I feel like having to manually choose 7 Pens to feature is a bit much perhaps, but there has got to be some better controls. We're all ears.

  16. Congrats on all the publicity! I wound up back here from Nerd Approved.

    Very well done!

    @chriscoyier, how about sorting by a priority set by the user where it falls back to sorting by view count? Seems like a reasonable compromise.

  17. @chriscoyier Yes, I have the same problem with my profile. Stuff I don't even think is that good is at the front, while stuff I'm actually proud of gets lost... and that's sad.

  18. HI! I was just wondering.. How could I change the star war logo, provided that I can customize it and upload it in my own server? Thank you very much in advance!

  19. @rdiez the Star Wars logo is an SVG, so you need an SVG editor like http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html to change it.

  20. @TimPietrusky Thanks mate! Sorry for the dumb question! Actually I figuered it out, and it works perfectly! Appreciate it! Cheers!

  21. Here's a Noob question: I see that you can edit the text (and even change the SVG image file that appears in the video, but I have no clue how), but if a person wanted to edit it with the codes provided, how would somebody upload that modified version to their site? Would you have to select the HTML, then the CSS, then the JS all at once and copy/paste?

    I love the crawl--it's the coolest graphic I've seen. Thanks

  22. My Hard goes Bomm Bomm THX

  23. Awesome.

    For be perfect imo this pen needs some star and sun in the background, and a paremeter for set a custom speed. How to set the speed ?

  24. Hi!! I'm using this for a school project and I'm wondering how this could be rendered. I need to combine this with other videos that relate to my custom star wars crawl. Thank you!

  25. @TimPietrusky I'm sorry I'm not sure how to change the image to something custom. Can anyone help here? Total newbie, need step by step.

  26. just amazing:) please add the stars

  27. Where is the source for the star wars logo? Cant find it. Would like to change

  28. As a starwars fan, this gave me goosebumps and I might add that I'm very pleased that you took your time and effort to achieve such a great effect =)

  29. @TimPietrusky Hello, I wanted to use this pen as a birthday present for one of my friends - adapt it with my friends description, logo etc, make something funny. I am a jQuery beginner and couldn't figure out how to reset the animation earlier if I wanted, before the audio file ends. To reset and go back to start whenever I click within the paragraph for example. I tried something like this in the 'constructor' but doesn't work:
    $( ".titles" ).click(function() { this.audio.currentTime = 0; this.reset(); });

    Any help would be much appreciated. Thank you!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...