How to Create Scrolling Text With CSS [+ Code Examples]

Download Now: 25 HTML & CSS Hacks
Jamie Juviler
Jamie Juviler

Published:

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 .

person using a laptop computer to create scrolling text with CSS

Download Now: 50 Code Templates [Free Snippets]

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

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
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

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.

Source

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.

Source

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.

scrolling text css example: digital marketing agency

Image Source

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.

scrolling text css example: hot sauce

Image Source

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.

scrolling text css example: charity website

Image Source

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.

scrolling text css example: agency website

Image Source

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.

scrolling text css example: portfolio website

Image Source

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

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
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

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.

New Call-to-action

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO