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.
Attribute | Description |
---|---|
width | provides the width or breadth of a marquee. For example width="10" or width="20%" |
height | provides the height or length of a marquee. For example height="20" or height="30%" |
direction | provides 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 |
scrolldelay | provides a feature whose value will be used for delaying each jump. |
scrollamount | provides value for speeding the marquee feature |
behavior | provides the scrolling type in a marquee. That scrolling can be like sliding, scrolling, or alternate |
loop | provides how many times the marquee will loop |
bgcolor | provides a background color where the value will be either the name of the color or the hexadecimal color code. |
vspace | provides a vertical space, and its value can be like vspace="20" or vspace="30%" |
hspace | provides 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:
- Size of the output by setting the canvas size
- Scrolling text fonts
- Background and text colors
- Smooth animation
- All sort of effects and filters available for the
canvas
element - 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.