Skip to main content

Star Wars opener recreated in CSS

Star Wars in HTML and CSS

Click on the image to see the opening sequence...
(opens in new tab)

Web designer Tim Pietrusky (opens in new tab) couldn't find a web version of the famous opening crawl sequence from 1977 sci-fi movie Star Wars - so he created his own version, using only HTML5, CSS and JavaScript.

His browser-based version of the much-loved movie title sequence is brilliantly executed, and it's a clear demonstration of how far we've come in the years since a plugin like Flash would have been needed to create such things. You can watch the animation here (opens in new tab).

Even better, Pietrusky has made the code available on Codepen.io for you to use in your own projects, plus there's a fascinating breakdown of thinking behind the HTML, CSS and JavaScript here (opens in new tab). And if you're seeking further inspiration, check out these stunning examples of CSS3 animation (opens in new tab).

[via Gizmodo (opens in new tab)]

Like this? Read these!

Have you seen a great example of something cool created entirely in markup? Let us know in the comments below...

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.