Scrolling Billboard Text
Display breaking news or updates. This script creates a smooth, continuous scrolling text effect using CSS animations, replacing the old deprecated HTML marquee tag.
Copy the Script
<style>
.marquee-container {
overflow: hidden;
white-space: nowrap;
background: #000; color: #fff;
}
.marquee-content {
display: inline-block;
padding-left: 100%;
animation: scroll-left 15s linear infinite;
}
/* Pause on hover */
.marquee-content:hover { animation-play-state: paused; }
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
<div class="marquee-container">
<div class="marquee-content">
Your scrolling text goes here...
</div>
</div>Frequently Asked Questions
The `
Yes. To scroll right-to-left (default) use `translateX(-100%)`. To scroll left-to-right, use `translateX(100%)` and adjust starting positions.
Yes. You can add `animation-play-state: paused;` to the CSS `:hover` selector for the scrolling element.