This JavaScript application demonstrates a way of scrolling text in a web page. When the end of the message is reached, it's repeated.
You can enter new text for the message in the form below. Alternatively, you can pass text to this page via the URL — handy for linking to customised messages. See below for notes about this and more.
There are options for size (height) of the message, the font used, and the scrolling speed. The message can appear as white text on a black background, or black text on a white background. There are buttons to restart the scrolling, and to pause or resume the scrolling. You can also click on the message (or the area to the right of it) to pause/resume.
Unfortunately, the techniques used here venture into some grey areas of browser implementations, so at this stage the page only works with Safari and Firefox on a Mac. However, according to Browsershots, the page loads and appears to work with Safari and Firefox on Windows. I'll try to add support for Chrome, Opera and Internet Explorer if I get time.
The starting point for this page was Ultimate JavaScript Scroller and Slider, by Michael Leigeber. I stripped out the sliding bits, optimised the code for scrolling left (rather than up or down), and added a few other options.
The basic mechanism is repeatedly reducing the left position of a relative <div> element, containing the text to scroll, after a small interval of time.
Extra width is needed on the right of the scroller to allow for large fonts. Smaller fonts could probably get away with a much smaller overhang.
Another trick to achieve smoothness involves breaking each word into separate characters. This avoids word-wrapping behaviour.
Messages and other parameters can be passed via the URL. All parameters are optional, and defaults are used if parameters are omitted. Specific details regarding the parameters:
text: The content of the message. Special characters can be URL-encoded if necessary
size: The size or height of the message, in pixels.
font: The font/typeface for the message.
invert: Flag to swap colours, i.e. use white writing on black background.
speed: The scrolling speed for the message.
URLs for the examples above:
Possible future enhancements
Include separate parameters for text and background colours.