Learning how to create scrolling text with CSS can help you elevate your website to make a more visually appealing experience for your visitors. The best part? Learning how to create text scrolling in CSS isn鈥檛 as tricky as it may seem. And once you learn how to create scrolling text, you can use it to make a news ticker, create end credits for a movie, or even .
While, generally speaking, it鈥檚 best to keep your website simple and content-focused, the occasional creative touch can go a long way in drawing new visitors in. This guide will teach you how to generate scrolling text animation CSS and HTML style. We鈥檝e also provided four code templates you can copy and tweak to create your own scrolling text for your site easily.
To create our scrolling text, we鈥檒l use CSS animations paired with the transform: translateX and transform: translateY properties. To ensure cross-browser compatibility, we鈥檒l also add animation rules with the vendor prefixes -webkit- (for Safari and Chrome) and -moz- (for Firefox). Ready to get started creating scrolling text animation CSS style? Let鈥檚 start with right-to-left text.
To make text scroll right-to-left, place it inside a div with the id scroll-text . This element will move inside its container div, scroll-container . The HTML, scroll animation CSS, and output are shown below.
See the Pen by Christina Perricone () on .
You鈥檒l have to tinker with the CSS to create your desired text scrolling effect. To change the scroll speed, change the seconds value of the animation property from 10s to a different number. A lower value will speed up the scrolling effect, while a higher value slows it down.
The scrolling speed is also affected by the div's width: The wider the scroll container, the faster the text will scroll. This means that the text speed changes if the browser window is resized. You can set the scroll container width to a specific pixel value to resolve this problem.
For left-to-right scrolling text, simply swap the positive and negative translateX values. We鈥檒l change all instances of 100% to -100% and all instances of -100% to 100% . I鈥檝e also right-aligned the text inside scroll-text . This makes the text appear immediately at the start of the animation.
See the Pen by Christina Perricone () on .
To make your text scroll vertically, change all occurrences of translateX to translateY . I鈥檝e also centered the text, decreased the animation duration to 5 seconds, and given the div container a height value. As a result, the vertical scroll is more apparent.
See the Pen by Christina Perricone () on .
Similar to with horizontal scrolling, we just need to flip our positive and negative translateY values to change the direction of the vertical scroll. Here鈥檚 an example:
See the Pen by Christina Perricone () on .
Now that we鈥檝e covered the basics of creating scrolling text, let鈥檚 dive into what you need to know to create more detailed elements. The more dynamic scrolling text elements may require JavaScript to mimic a marquee effect. We鈥檝e included a few examples of using JavaScript for this purpose.
This first example uses JavaScript (specifically jQuery) to generate a rotating ticker animation from a group of list items. The exciting thing about this implementation is that you can add as many list items as you want 鈥� and you don鈥檛 need to alter the script.
See the Pen by Jonathan Marzullo () on .
In this next example, you can trigger side-scrolling text from a user鈥檚 scrolling action. This is somewhat common on websites and adds additional dimensionality to increase engagement.
See the Pen by Nikola Antic () on .
Curious about what scrolling text animations could look like in practice? It鈥檚 one thing to see a basic example as a demo, and another to see it in action. For inspiration, we鈥檝e sourced a few of our favorite examples of what your scrolling text could look like once you implement it on your site.
User experience studio Digital of Things employs scrolling text on its homepage. As a result, it achieves a visually attractive, full-page marquee effect. It鈥檚 minimal but impactful, and the text moves relatively slowly to avoid overwhelming the visitor.
Scrolling text dominates the homepage of this hot sauce brand. The text moves left-to-right, right-to-left, and vertically across the page as you scroll down. It grabs the visitor鈥檚 attention and adds a bit of playfulness to this website鈥檚 design.
This website for a disaster relief fund implements more subtle scrolling text. The designers maintain focus on images and articles while positioning the scrolling text along the bottom of the screen.
This text is also slow-moving, as its size would make it difficult to read at faster speeds. Remember: The visual attractiveness of the scrolling text is important to consider, but user experience should always remain your number one priority.
Squadeasy鈥檚 404 page does a good job of letting you know it鈥檚 a 404 page, thanks to screen-wide scrolling text. We鈥檙e also a fan of the floating puppy head in the center to keep things light.
Lastly, we have the portfolio site for designer Andrew Leguay. When you scroll down the homepage, you鈥檒l notice a clever use of scrolling text to showcase the brands the designer has collaborated with. This scrolling text is also tilted slightly, which makes the element shine even more.
In addition to CSS animations, you can also create scrolling text with pure HTML using the . This tag generates a page region with scrolling text automatically. Then, you can customize its function with various attributes:
See the Pen by Christina Perricone () on .
However (and that鈥檚 a big 鈥渉owever鈥�), the marquee element is deprecated in HTML5, and we don鈥檛 suggest you use it for this reason. If the examples above work in your browser, great! However, there鈥檚 a chance they won鈥檛 in the future. By sticking with the scrolling text animation CSS method we explained above you won鈥檛 face any issues, as this complies with the current CSS3 standards.
Curious to learn more about how HTML and CSS work? We've compiled everything marketers need to know about these languages into one free ebook 鈥� get it below.
Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.