Demo Star Wars 3D Scrolling Text use CSS3

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

STAR WARS_{Title in CSS3}

EPISODE IV
A NEW HOPE FOR CSS3

It is a period of CSS3.

This is a demonstration of Star Wars-style scrolling 3D titles in CSS3. It possibly has no practical purpose whatsoever but it looks great and you can impress your friends.

Star Wars is an American epic space opera franchise that consists of a film series created by George Lucas.

Also, by mentioning "Star Wars", everyone will understand what I mean. And I'll receive several thousand more visits.

The film series has spawned a media franchise outside the film series called the Expanded Universe including books, television series, computer and video games, and comic books.

The first film in the series was originally released on May 25, 1977, under the title Star Wars, by 20th Century Fox, and became a worldwide pop culture phenomenon, followed by two sequels, released at three-year intervals.

Inside, we have another absolutely-positioned DIV which contains the text (#titlecontent). The top is set to 100% to ensure it starts off-screen then uses CSS3 animation to move it upward over time. No JavaScript is required.

You will probably need to adjust the movement amount and timing depending on the quantity of text you want to show. The 3D depth can also be tweaked in the #titles declaration.

All the code is contained in this single HTML file…

View the source, Luke!

Sorry. Couldn't resist it.

You're welcome to use this demonstration code in your own sites. Please link back to the original article at:

Star Wars 3D Scrolling Text in CSS3

and give me a shout on Twitter@craigbuckler– I'd love to see how you use and abuse it!

Finally, Han shot first and the original, unadulterated movies remain the best. Stop fiddling with them, George!