Scrolling Text Using HTML

When you’ve been building web applications for over 25 years like I have, using HTML, CSS, and JavaScript becomes second nature. In this article, I’ll show you some simple ways to create scrolling text using these tools. Whether you’re just starting out or looking to add a neat effect to your site, there’s a method here for you.

If you only need scrolling text to put on your site, upload into Giphy or on Instagram, I highly recommend this free scrolling text generator on PSDDude.

I’ve already shared some advanced tips on my website, like how to create a bar chart with HTML, add a stroke effect to text with CSS, and even build infographic charts using HTML tags.

But today, we’re focusing on scrolling text—let’s dive in!

• <marquee> HTML Scrolling Text
• Pure CSS Scrolling Text
• Scrolling Text with JS
• jQuery Scrolling Text
• HTML5 Canvas Scroll Text

HTML Scrolling Text

Let’s start with the simplest approach:

using pure HTML.

If you’re looking for a quick and easy way to add scrolling text to your webpage, there’s an old-school method that requires just one HTML tag. While I don’t recommend this for modern projects due to its deprecated status, it’s still useful to know. Still, this is the fastest way to get scrolling text without any CSS or JavaScript.

HTML <marquee> Tag (Deprecated)

Simply add a <marquee> tag around the text to create a scrolling effect.

Example: <marquee>Scrolling Text</marquee>

See the Pen HTML Scrolling Text by Ion Emil Negoita (@inegoita) on CodePen.

The <marquee> tag has a few attributes for adjusting how it behaves.

Note: This tag is deprecated so don’t use it for modern web development.

CSS Scrolling Text

Let’s go an extra step and see how to create moving text with CSS.

CSS Moving Text animation With @keyframes

Use CSS animations and @keyframes to create a scrolling effect.

<div class="scrolling-text">Scrolling Text</div>
<style>
.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}

@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>

Basically this code creates a CSS scroll text by animating the translateX transform property. The speed of the CSS moving text is given by the timing of the animation property. Lower duration for the animation means a faster scrolling text, higher values will make the text move slower.

See the Pen CSS Moving Text animation With @keyframes by Ion Emil Negoita (@inegoita) on CodePen.

Also, swap the translateX transform with translateY in the animation and you’ll get a vertical scrolling text instead of the horizontal scrolling text.

CSS overflow with scroll or auto

Apply overflow: scroll or auto to a container, allowing users to manually scroll text.

HTML & CSS Code:

<div style="width: 200px; height: 50px; overflow: scroll;">
Scrolling Text Scrolling Text Scrolling Text
</div>

I know, this is not much of a scrolling text solution, unless you somehow animate the scroll position. But, more on this below.

HTML + CSS + JavaScript Scrolling Text Solutions

Here’s how you use JavaScript with setInterval or requestAnimationFrame to manipulate scrollLeft or scrollTop for making the scroll text effect:

HTML code:

<div class="scrolling-text">
Scrolling Text Scrolling Text Scrolling Text
</div>

CSS code:

.scrolling-text {
width: 30vw;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
font-size:clamp(16px,50dvh,220px);
white-space:nowrap;
margin: 0 auto;
}

JavaScript code:

const container = document.querySelector('.scrolling-text');
let scrollAmount = 0;

setInterval(() => {
scrollAmount += 10;
container.scrollLeft = scrollAmount;
if (scrollAmount >= container.scrollWidth) {
scrollAmount = 0;
}
}, 20);

Basically, we have a div with our long text that we want to become a scrolling text. We hide the overflow, but we increase the scrolling amount of the container ever 20ms by 10px. Play around with these values to change the scrolling text speed.

Here’s how the result looks like:

See the Pen Untitled by Ion Emil Negoita (@inegoita) on CodePen.

Alternatively, any HTML element has scrollTo or scrollBy for changing the scroll position of the element. Here’s how to use those:

scrollingTextElement.scrollBy({ left: -50, behavior: 'smooth' });

or

.scrollTo({
top: 100,
left: 100,
behavior: "smooth",
});

jQuery Scrolling Text

So, we’re going from simple to more complex. To use jQuery for making scrolling text we have to do this:

$(document).ready(
function loop() {
$('.scrolling-text').css({scrollLeft:0});
$('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);
});

jQuery.animate allows animating any element property, so in this case we animate the scrollLeft property. I set this up as a loop, so after the 10000ms it will reset the scrollLeft position back to 0.

See the Pen jQuery Scrolling Text by Ion Emil Negoita (@inegoita) on CodePen.

HTML5 Canvas Scrolling Text

The last option for creating scrolling text is also the most complex – using HTML5 Canvas. It’s the most complex, but also it offers the most options for controlling the end result like:

1. Size of the output by setting the canvas size
2. Scrolling text fonts
3. Background and text colors
4. Smooth animation
5. All sort of effects and filters available for the canvas element
6. Possibility of exporting as animated GIF scrolling text, video scrolling text, etc.

Let’s create the basic scroll text setup using canvas:

<canvas id="scrollingCanvas" width="300" height="50"></canvas>
<script>
const canvas = document.getElementById('scrollingCanvas');
const ctx = canvas.getContext('2d');
const text = "Scrolling Text Example";
let x = canvas.width;

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText(text, x, 30);
x -= 2; // Adjust speed of scrolling here
if (x < -ctx.measureText(text).width) {
x = canvas.width; // Reset position when text is out of view
}
requestAnimationFrame(draw);
}

draw();
</script>

Basically, the code uses a drawing loop with the requestAnimationFrame function. This technique is also used when making HTML5 games. The draw function is called on every frame and it updates the scroll text position by 2px.

See the Pen Untitled by Ion Emil Negoita (@inegoita) on CodePen.

Additionally, the code makes the scrolling text seamless loop. The ctx.measureText gets the exact width and height of the text depending on the font, font size, letter spacing, etc. So, when the scrolling text horizontal x position goes beyond the width of the text, the position is reset creating the seamless effect.

Some Scrolling Text Ideas

Here are some scroll text ideas. Click on the images to go to the  free online scrolling text generator where you can adjust the settings and download the GIF scrolling text image or WEBM scrolling text video file:

Breaking News Scrolling Text 

Scrolling Text Inspirational Quotes

Weather Scrolling Text

Movie Credits Scrolling Text

In Conclusion

Hope you find this article useful. What will you use scrolling text for? Did I miss a method for creating scrolling text? Drop me a comment and let me know what you think.