Star Wars 3D Scrolling Text in CSS3
Published
I always try to offer practical tips on SitePoint. Really. This isn’t one, but I couldn’t resist it. Without further ado…
View Star Wars 3D Scrolling Text in CSS3
(Chrome, Safari or Firefox)
How cool is that? No JavaScript, no graphics — just pure HTML5 text and CSS3. It works in Chrome, Safari and Firefox. Opera won’t show the 3D transform in the current release, but it’ll work. Internet Explorer. Hmmm. Sorry, but you’ll need to wait for IE10 since previous versions don’t support transformations and animations.
The effect is remarkably easy to implement. The HTML requires an outer element (#titles) and a section which will be scrolled (#titlecontent):
<div id="titles"><div id="titlecontent">
<p>content</p>
</div></div>
The outer DIV
is positioned at the bottom center of the browser window then rotated using 3D perspective using a transform (note that vendor prefixes have been omitted here, but they’re in the actual code):
#titles
{
position: absolute;
em;
em;
bottom: 0;
left: 50%;
margin-left: -9em;
%;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);
}
A pseudo-element is applied to overlay a fade-out gradient at the top of the outer DIV
:
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
Then all we need do is scroll the content using CSS animation:
#titlecontent
{
position: absolute;
top: 100%;
animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
(Note you could also use margin-top instead of absolutely-positioning the content, but it didn’t seem as smooth.)
View the demonstration again…
That’s all there is to it. If you want to delve further: view the source, Luke.
Please use the code as you wish, but I hope this article doesn’t lead to the re-introduction of pointless Star Wars-inspired splash pages!
If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Learn CSS3.
Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.
You might also like:
-
Web
10 Tougher Tasks to Reduce Page Weight
by Craig Buckler
-
Learnable
Book: Jump Start Bootstrap
by Syed Fazle Rahman
PREMIUM
-
HTML & CSS
Behind the Scenes with Hover and WebGL
by Josh Holmes
Free book: Jump Start HTML5 Basics
Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.
Great effect but it seems to be broken in chrome. The text goes totally along the wrong vector.
Which version of Chrome are you using? It certainly works in v22 on Windows.
Ah, I forgot that I’m on the beta channel, perhaps that has something to do with it. I’m on 23.0.1271.40 beta-m.
this code doesn’t work on ie even 9 and chrome
I’m using Chrome and it works like a charm.
I mentioned that it won’t work in IE9. It should be fine in recent versions of Chrome, though.
Of course it doesn’t work in IE9. Microsoft creates inferior browsers and despite the commercial’s claims of it being awesome and up-to-date, it’s not. Still behind Chrome & Firefox.
haha! I love it!
@Darth Craig. Nice!
It does work for me in Chrome and in FF. In FF with a bit of a stutter btw. Also an amazing CPU load for something with no actual use.
Always good to know that the people at sitepoint are pushing the boundries (to a galaxy far, far away)
Thanks Jeroen!
Try clearing the browser history and cache in Firefox. It seems fine on a 3 year-old Windows 7 laptop but I did notice stuttering if it was left going for a few minutes.
I’m using Chrome version 22.0.1229.94 m (which is apparently “up to date,” according to the about menu) on Windows 7, and I’m not seeing the scrolling text, either.
That’s the version I’m using. I suppose an extension could cause the problem? Or perhaps it’s a graphics card issue? Do CSS3 animations fail elsewhere?
You could try re-installing. Alternatively, try it in Firefox?
Hi Craig,
Opened the demo up in Firefox and it worked fine! Tried again in Chrome with all my extensions disabled, but no luck. Very odd…
It works in both Chrome(v22) and FF on my Windows 7 system. It doesn’t work on IE 9
The Aliasing, it gives me eye cancer.
Most effects are far better if you shut your eyes…
Works in Firefox 16.0.1, but not in Chrome 22 (or 24 if I switch to the dev channel). In Chrome I get the “Star Wars titles in CSS3″ text, but not the scrolling text after that. I used a quite old setup running Windows XP (SP3) with an ATI X1250 (integrated) GPU. I guess the latter could be responsible for the failure. Maybe Chrome’s 3D transformations depend on some GPU features? :-o
I’m beginning to wonder if Google have restricted certain effects on some graphics cards. I think they do for WebGL, but this is CSS3 transforms — it should work regardless?
Despite its popularity, I do find Chrome a little quirky at times.