Star Wars Scroll Text Generator

I always try to offer practical tips on SitePoint. Really. This isn't one, but I couldn't resist it. Without further ado…

Star Wars 3D scrolling title text 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; 	width: 18em; 	height: 50em; 	bottom: 0; 	left: 50%; 	margin-left: -9em; 	font-size: 350%; 	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 freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad