Big Text Scroller 2

This JavaScript application lets users specify some text to scroll 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 scrolling speed, the direction and the font used. 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.

This is intended to eventually replace Big Text Scroller, and uses a proposed CSS3 property to support scrolling/sliding/marquees. Current release versions of Safari and Chrome provide interim support for this feature. The page has been tested with Safari on Mac OS X. According to Browsershots, the page loads and appears to work with Safari and Chrome on Windows. Similar functionality is provided by the <marquee> tag, which works in Internet Explorer, Firefox and other browsers. I hope to add a "fallback" option to make this page work with such browsers.

---

Settings

1. Text to Scroll Good news everybody! Lorem ipsum ...
2. Size Extra Small Small Medium Large Extra Large
3. Speed Slowest (Smoothest) Slow (Smooth) Medium Fast (Rough) Fastest (Roughest)
4. Direction Left Right
5. Font Serif Sans Serif Fixed-width
6. Swap colours? Check for white writing on black background

Control

The complete URL for the current scroller settings

Examples

Click on the links below to try out some sample messages:

---

Notes

• 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.
    
  • speed: The scrolling speed for the message.
    
  • direction: The scrolling direction for the message.
    
  • font: The font/typeface for the message.
    
  • invert: Flag to swap colours, i.e. use white writing on black background.
    
• The complete URL for the current scroller settings is displayed beneath the form.
• URLs for the examples above:

Possible future enhancements

• Include separate parameters for text and background colours.
• Add a fallback using the <marquee> tag, making the page work with browsers that don't support CSS3 scrolling.