Creating Scrolling Text With HTML, CSS, and JavaScript

Tutorials

JavaScript

When you’ve been building web applications for over 25 years, as I have done, using HTML, CSS, and JavaScript has become second nature.

In this article, I’ll show you some simple ways to create scrolling text using these tools, including five different methods for coding scrolling text with plain HTML, HTML and 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: This is a deprecated HTML tag, so I’d recommend restraint when using it for modern web projects.

2. Animated Scrolling Text With CSS

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

CSS

@keyframes scroll {

 0% { transform: translateX(100%); }

 100% { transform: translateX(-100%); }

}

Then apply that animation to your text element:

HTML

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

By adding this CSS:

Plain Text

.scrolling-text {

width: 100%;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

animation: scroll 10s linear infinite;

}

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:

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

CSS code:

CSS

.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:

JavaScript

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

let scrollAmount = 0;

​

setInterval(() => {

 scrollAmount += 10;

 container.scrollLeft = scrollAmount;

 if (scrollAmount >= container.scrollWidth) {

  scrollAmount = 0;

 }

}, 20);

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

4. Scroll Text With jQuery

CSS

$(document).ready(

 function loop() {

  $('.scrolling-text').css({scrollLeft:0});

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

 }

);

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 overkill in this situation, and it only makes sense if you have already used 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 to the Scrolling Text generator on PSDDude, where you can create your own customized scrolling text images and videos.

The HTML code is straightforward:

HTML

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

And the JS is where the magic happens:

JavaScript

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

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way to create 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

Learn more about it in this link.

Star Wars Opening Crawl Scrolling Text Generator

Learn more about it in this link.

Stock Market Scrolling Text

Learn more here.

Weather Scrolling Text

Learn more about it here.

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

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.

Source:
https://dzone.com/articles/scrolling-text-html-css-javascript