Star Wars 3D Scrolling Text in CSS3

Craig Buckler
Craig Buckler
Share

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 textView 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.

Frequently Asked Questions (FAQs) about CSS3 Star Wars Scrolling Text

How can I adjust the speed of the scrolling text?

The speed of the scrolling text can be adjusted by modifying the animation duration in the CSS code. The animation duration is set in seconds or milliseconds. For example, if you want the text to scroll slower, you can increase the duration. If you want it to scroll faster, decrease the duration. Remember, the higher the value, the slower the animation, and vice versa.

Can I change the direction of the scrolling text?

Yes, you can change the direction of the scrolling text. This can be done by altering the keyframes in the CSS code. By default, the text scrolls from bottom to top. If you want it to scroll from top to bottom, you need to swap the values of the keyframes.

How can I add more text to the scroll?

Adding more text to the scroll is simple. In the HTML section of your code, locate the div with the class “content”. Inside this div, you can add as much text as you want. The text will automatically be included in the scrolling animation.

Is it possible to change the color of the scrolling text?

Yes, you can change the color of the scrolling text. This can be done in the CSS section of your code. Locate the .content class and change the color property to your desired color. You can use color names, hex codes, or RGB values.

Can I use this scrolling text on my website?

Absolutely! You can use this scrolling text on your website. Simply copy the HTML and CSS code and paste it into your website’s code. Make sure to place the CSS code within style tags in the head section of your HTML document.

How can I make the text scroll horizontally instead of vertically?

To make the text scroll horizontally, you need to modify the transform property in the CSS code. Instead of using the rotateX function, use the rotateY function. This will change the rotation axis from vertical to horizontal.

Can I add a background image to the scrolling text?

Yes, you can add a background image to the scrolling text. In the CSS code, locate the body selector and add the background-image property. Set the value to the URL of your desired image.

Is it possible to pause the scrolling text?

Yes, it is possible to pause the scrolling text. This can be done by adding a hover effect in the CSS code. When the mouse hovers over the text, the animation-play-state property is set to paused, stopping the animation.

Can I change the font of the scrolling text?

Yes, you can change the font of the scrolling text. This can be done in the CSS section of your code. Locate the .content class and change the font-family property to your desired font.

How can I make the scrolling text responsive?

To make the scrolling text responsive, you can use media queries in your CSS code. Media queries allow you to apply different styles depending on the size of the device screen. This way, you can ensure that the scrolling text looks good on all devices.