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

With some clever use of HTML, CSS, and JavaScript, you can make somepretty amazing websites. But, let’s not dance around things — actually writing the code can feel mundane at times, especially if you’re just starting to learn the basics.

That’s why we recommend trying something new every once in a while. Maybe it’s learning a new element you’ve never used before, or it’s experimenting with CSS or a framework likeBootstrap.

If now feels like one of those times for you, keep reading. In this guide, we’ll show you how to generate scrolling text in HTML and CSS. With this fun trick, you can make a news ticker, create end credits for a movie, or evenmake visitors feel immersed in a galaxy far, far away.

While it’s best to keep websites simple and content-focused, some creative touches here and there can draw new visitors in. Below, we’ve provided four code templates you can copy and tweak for an easy text scrolling effect.

How to Create Scrolling Text in CSS

We’ll be usingCSS animationspaired with thetransform: translateXandtransform: translateYproperties to achieve scrolling text with CSS. To ensure cross-browser compatibility, we’ll also add animation rules with the vendor prefixes-webkit-(for Safari and Chrome) and-moz-(for Firefox). Let’s start with right-to-left text.

CSS Horizontal Scrolling Text: Right-to-Left

To make our text scroll right-to-left, we’ll place it inside a div with the idscroll-text— this is the element that will be moving inside its container div,scroll-container. The HTML, scroll animation CSS, and result are below.

See the PenScrolling Text CSS: right to leftby Christina Perricone (@hubspot) onCodePen.

Ultimately, you’ll have to do some tinkering with the CSS to get your scrolling effect to look how you want. To change the scroll speed, change the seconds value of theanimationproperty from10sto something else. A lower value speeds up the scrolling effect and a higher value slows it down.

The scrolling speed is also affected by the width of the div: The wider the scroll container, the faster the text will scroll. This means that the text speed with change if the browser window is resized. To resolve this problem, you can set the scroll container width to a specific pixel value.

CSS Horizontal Scrolling Text: Left-to-Right

For left-to-right scrolling text, just swap the positive and negativetranslateXvalues. So, we’ll change all instances of100%to-100%and all instances of-100%to100%. I’ve also right-aligned the text insidescroll-text这样的文本出现立即开始of the animation.

See the PenScrolling Text CSS: left to rightby Christina Perricone (@hubspot) onCodePen.

CSS Vertical Scrolling Text: Bottom-to-Top

To make your text scroll vertically, change all instances oftranslateXtotranslateY. I’ve also centered the text, lowered the animation duration to 5 seconds, and given the div container a height value so the vertical scroll is more apparent.

See the PenScrolling Text CSS: bottom to topby Christina Perricone (@hubspot) onCodePen.

CSS Vertical Scrolling Text: Top-to-Bottom

Like with horizontal scrolling, we just need to flip our positive and negativetranslateYvalues to change the direction of the vertical scroll:

See the PenScrolling Text CSS: top to bottomby Christina Perricone (@hubspot) onCodePen.

JavaScript Scrolling Text

More elaborate and dynamic scrolling text elements may require JavaScript to mimic a marquee effect, rather than relying purely on CSS animations. Here are a couple of 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 cool thing about this implementation is that you can add as many list items as you want without needing to alter the script.

See the PenInfinite scrolling horizontal textby Jonathan Marzullo (@jonathan) onCodePen.

Source

This next example triggers side-scrolling text from a user’s scrolling action. This is somewhat common on websites and adds some extra dimensionality to increase engagement.

See the PenHorizontal Scroll Textby Nikola Antic (@nikantic) onCodePen.

Source

Scroll Text Examples

It’s one thing to see a basic example of scrolling text as a demonstration, and an entirely different thing seeing it worked into a website’s design. For inspiration, here are some examples of what your scrolling text could look like.

Digital of Things

User experience studio Digital of Things employs scrolling text on its homepage, achieving a full-page marquee effect. It’s minimal but impactful, and the text moves relatively slowly so as to not overwhelm 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. As you scroll down, the text moves left-to-right, right-to-left, and vertically across the page. It’s a treat to the eyes, sure to grab the attention of anyone in the market for a new topping.

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 have kept the focus on the images and articles while positioning the scrolling text along the bottom of the screen. Again, this text is slow-moving, as its size would make it difficult to read at faster speeds.

scrolling text css example: charity website

Image Source

Squadeasy

Squadeasy’s 404 page reallydoes a good job of letting you know it’s a 404 page, thanks to scrolling text across the whole screen. Plus, the floating puppy head in the center keeps things light.

scrolling text css example: agency website

Image Source

Andrew Leguay

Lastly, we have the portfolio site for designer Andrew Leguay. Scroll down the homepage and you’ll notice a clever use of scrolling text to showcase the brands he’s collaborated with. This scrolling text is also tilted slightly, helping the page element stand out even more.

scrolling text css example: portfolio website