Star Wars Scrolling Text in CSS3

HeatherCSS, Inspiration0 Comments

star-wars-css3-scrolling-text

A long time ago in a galaxy far, far away….

…actually no, let’s get real – no one could have pulled off this sweet CSS3 text animation back in 1977.

What’s extra spectacular about this web animation is that it’s been created entirely in HTML and CSS – no JavaScript or jQuery to be found! How awesome is that?

Now on to the good bits:

HTML:
CSS:
This Star Wars scrolling text really shows off the power of the new CSS3 transform property, which gives the opening crawl its trademark tilted perspective.

Since this animation does rely heavily on CSS3, it likely won’t display correctly for you if you’re still running with an older browser – so in case you fall into that category, here’s a video showing off the result (with some Star Wars-esque music added):

Shout out to Craig Buck for creating this wonderful piece of web coding. We love it!

If you love this animation too and would like to see more, make sure to head over to our Inspiration page for all kinds of web animation ideas. This scrolling text is also available on codepen.io.

May the fourth be with you.

Photo Credit: La Tête Krançien via Compfight cc modified from original

Leave a Comment