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)
<div id="titles"><div id="titlecontent">
<p>content</p>
</div></div>
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);
}
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;
}
#titlecontent
{
position: absolute;
top: 100%;
animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
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.
Craig BucklerCraig 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.
