A short time ago in a browser very, very close…
EPISODE IV
A NEW HOPE FOR CSS3
It is a period of vendor war.
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.
Before movie-buffs start ranting, I realize Star Wars wasn't the first to use crawling 3D titles, but few of you will remember the Flash Gordon series or the 1936 adaption of HG Wells' "Things to Come".
Also, by mentioning "Star Wars", everyone will understand what I mean.
The scrolling titles work well in Chrome, Safari, Firefox, Opera and Internet Explorer 10. Other browsers will show a blank page, but that's progress for you.
So how does it work? It's fairly simple. We have an outer absolute DIV (#titles) which is rotated along the X-axis using perspective to give the impression of depth. The same DIV also has an :after pseudo-element which applies a linear gradient so the text appears to fade out at the top.
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 on your own site. Please let me know if you do anything interesting – I'm on Twitter @craigbuckler.
Finally, Han shot first and the original, unadulterated movies remain the best. Stop fiddling with them, George!