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’t 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 bring visitors to a galaxy far, far away .
![Streamline Your Coding: 25 HTML & CSS Hacks [Free Guide]](https://no-cache.hubspot.com/cta/default/53/848be230-f06a-420e-9a24-82b45fe61632.png)
While, generally speaking, it’s 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’ve also provided four code templates you can copy and tweak to create your own scrolling text for your site easily.
How to Create Scrolling Text in CSS
To create our scrolling text, we’ll use CSS animations paired with the transform: translateX and transform: translateY properties. To ensure cross-browser compatibility, we’ll 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’s start with right-to-left text.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
CSS Horizontal Scrolling Text: Right-to-Left
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 Scrolling Text CSS: right to left by Christina Perricone (@hubspot) on CodePen.
You’ll 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.
CSS Horizontal Scrolling Text: Left-to-Right
For left-to-right scrolling text, simply swap the positive and negative translateX values. We’ll change all instances of 100% to -100% and all instances of -100% to 100% . I’ve also right-aligned the text inside scroll-text . This makes the text appear immediately at the start of the animation.
See the Pen Scrolling Text CSS: left to right by Christina Perricone (@hubspot) on CodePen.
CSS Vertical Scrolling Text: Bottom-to-Top
To make your text scroll vertically, change all occurrences of translateX to translateY . I’ve 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 Scrolling Text CSS: bottom to top by Christina Perricone (@hubspot) on CodePen.
CSS Vertical Scrolling Text: Top-to-Bottom
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’s an example:
See the Pen Scrolling Text CSS: top to bottom by Christina Perricone (@hubspot) on CodePen.
JavaScript Scrolling Text
Now that we’ve covered the basics of creating scrolling text, let’s 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’ve 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’t need to alter the script.
See the Pen Infinite scrolling horizontal text by Jonathan Marzullo (@jonathan) on CodePen.
In this next example, you can trigger side-scrolling text from a user’s scrolling action. This is somewhat common on websites and adds additional dimensionality to increase engagement.
See the Pen Horizontal Scroll Text by Nikola Antic (@nikantic) on CodePen.
Scroll Text Examples
Curious about what scrolling text animations could look like in practice? It’s one thing to see a basic example as a demo, and another to see it in action. For inspiration, we’ve sourced a few of our favorite examples of what your scrolling text could look like once you implement it on your site.
Digital of Things
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’s minimal but impactful, and the text moves relatively slowly to avoid overwhelming the visitor.
-1.gif?width=650&name=Scrolling%20text%20(FIR%20update%20Sept.%202021)-1.gif)
Mama Joyce Peppa Sauce
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’s attention and adds a bit of playfulness to this website’s design.
Restore Hope Appeal
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
Squadeasy’s 404 page does a good job of letting you know it’s a 404 page , thanks to screen-wide scrolling text. We’re also a fan of the floating puppy head in the center to keep things light.
.gif?width=650&name=Scrolling%20text%20(FIR%20update%20Sept.%202021).gif)
Andrew Leguay
Lastly, we have the portfolio site for designer Andrew Leguay. When you scroll down the homepage, you’ll 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.
-2.gif?width=650&name=Scrolling%20text%20(FIR%20update%20Sept.%202021)-2.gif)
HTML5 Scrolling Text: A Note on the marquee Element
In addition to CSS animations, you can also create scrolling text with pure HTML using the <marquee> element . This tag generates a page region with scrolling text automatically. Then, you can customize its function with various attributes:
See the Pen marquee examples by Christina Perricone (@hubspot) on CodePen.
However (and that’s a big “however”), the marquee element is deprecated in HTML5 , and we don’t suggest you use it for this reason. If the examples above work in your browser, great! However, there’s a chance they won’t in the future. By sticking with the scrolling text animation CSS method we explained above you won’t face any issues, as this complies with the current CSS3 standards.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Discover more about HTML & CSS.
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.
![How to Import Bootstrap in React [The Beginner's Guide]](https://blog.hubspot.com/hubfs/import-bootstrap-in-react.jpg)
