This content originally appeared on DEV Community and was authored by codingdudecom
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%); }
}
Then apply that animation to your text element:
<div class="scrolling-text">Scrolling Text</div>
by adding this CSS:
.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:
<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);
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);
}
);
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>
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();
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
Star Wars Opening Crawl Scrolling Text Generator:
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.
This content originally appeared on DEV Community and was authored by codingdudecom
codingdudecom | Sciencx (2024-09-12T17:05:28+00:00) Scrolling Text Using HTML. Retrieved from https://www.scien.cx/2024/09/12/scrolling-text-using-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.