“Scrolling text” can mean two different interfaces: automatically moving text, or a fixed box that the user scrolls. They should be implemented differently.
Automatically moving text
Use CSS animation when the text should travel on its own. Keep the text in normal HTML so it is selectable and available even if animation is disabled.
.auto-scroll { overflow: hidden; }
.auto-scroll > span {
display: block;
width: max-content;
animation: leftward 10s linear infinite;
}
@keyframes leftward {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
User-controlled scroll boxes
A scroll box should not animate at all. Give a container a maximum height and overflow: auto.
.scroll-box {
max-height: 14rem;
overflow: auto;
padding: 1rem;
border: 1px solid currentColor;
}
This distinction matters for usability. A person reading a long note should normally control the scroll position rather than chase continuously moving copy.
Vertical scrolling
For credits or a narrow information panel, use translateY. A one-pass animation often works better than an endless loop because the start and finish are easy to understand.
Keep output portable
If generated code will be pasted into a CMS, prefer a small class namespace, avoid global selectors, and do not rely on build tools. ScrollingTextGenerator.com prefixes generated component classes so they are less likely to collide with an existing theme.
Use the main generator for moving text and the Scroll Box Generator for user-controlled overflow.