Scrolling Text HTML

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!

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.

AttributeDescription
widthprovides the width or breadth of a marquee. For example width="10" or width="20%"
heightprovides the height or length of a marquee. For example height="20" or height="30%"
directionprovides the direction or way in which your marquee will allow you to scroll. The value of this attribute can be: left, right, up, or down
scrolldelayprovides a feature whose value will be used for delaying each jump.
scrollamountprovides value for speeding the marquee feature
behaviorprovides the scrolling type in a marquee. That scrolling can be like sliding, scrolling, or alternate
loopprovides how many times the marquee will loop
bgcolorprovides a background color where the value will be either the name of the color or the hexadecimal color code.
vspaceprovides a vertical space, and its value can be like vspace="20" or vspace="30%"
hspaceprovides a horizontal space, and its value can be like hspace="20" or hspace="30%"

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 - Breaking News

Scrolling Text Inspirational QuotesScrolling Text Inspirational Quote

Weather Scrolling TextWeather 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.

John Negoita

View posts by John Negoita
I'm a Java programmer, been into programming since 1999 and having tons of fun with it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top