DEV Community

Cover image for Scrolling Text Using HTML
codingdudecom
codingdudecom

Posted on

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.

The post Scrolling Text Using HTML appeared first on Coding Dude.

I’ll show you 5 different methods for coding scrolling text with plain HTML, HTML & CSS and finally HTML + CSS + JS.

1. Plain HTML Scrolling Text

Simply add a tag around the text to create a scrolling effect. This tag offers a few interesting parameters among which:

  • direction — can be: left, right, up, or down
  • scrollamount - the speed of the scroll text
  • loop — how many times should the scrolling repeat

NOTE: The is a deprecated HTML tag, so I’d recommend restrain in using it for modern web projects.

2. Animated Scrolling Text with CSS

Define a CSS animation called scroll that animates the translateX property.



@keyframes scroll {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
}


Enter fullscreen mode Exit fullscreen mode

Then apply that animation to your text element:



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


Enter fullscreen mode Exit fullscreen mode

by adding this CSS:



.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}


Enter fullscreen mode Exit fullscreen mode

Changing from translateX to translateY will give you a vertical scrolling text. Switching 0% and 100% around will give you the reverse scrolling text direction. And in the .scrolling-text CSS class if you change the 10s duration of the animation you change the speed of the scrolling text.

3. HTML + CSS + JavaScript Scrolling Text

HTML code:



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


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

JavaScript code:



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

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


Enter fullscreen mode Exit fullscreen mode

This is my most “unelegant” solution for making scrolling text. Basically it’s cramming a text in a container with scroll and changes the scrolling of the container programmatically. When the scroll amount goes over the container amount it resets.

4. Scroll Text with jQuery



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


Enter fullscreen mode Exit fullscreen mode

Use the animate() jQuery function to animate the scrollLeft property and this will create a scrolling text effect.

In my view jQuery is a bit of an overkill in this situation, and it only makes sense if you already use jQuery in your project.

Of course, animate() can also be used for animating the translateX or translateY properties as seen above.

5. Scrolling Text with Canvas HTML5

This is my favorite method. Especially because it’s so flexible and offers so many possibilities, like for example exporting the scrolling text as GIF or even video. You can see this in action by going the the Scrolling Text generator on PSDDude where you can create your own customized scrolling text images and videos.

The HTML code is straight forwards:



<canvas id="scrollingCanvas" width="300" height="50"></canvas>


Enter fullscreen mode Exit fullscreen mode

and the JS is where the magic happens:



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();


Enter fullscreen mode Exit fullscreen mode

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way for creating smooth scrolling text.

You get the size on screen of the text using the measureText() context method. This allows creating a seamless scrolling text by resetting the text position when it reaches the end position.

Bonus: A Few Scrolling Text Ideas

LED Scrolling Text GIF:
LED Scrolling Text

Star Wars Opening Crawl Scrolling Text Generator:

Stock Market Scrolling Text:
Stock Market Scrolling Text

Weather Scrolling Text:
Weather Scrolling Text

These were created with the scrolling text gif and video generator on PSDDude.

In Conclusion

Now you know how to make scrolling text using HTML, CSS and/or JavaScript.

What will you use this for?

Drop me a comment to let me know. Also, if you feel I’ve missed an important method for creating scrolling text, give me your thoughts on that.

Top comments (0)