Whoever invented the <marquee> tag had poor execution, but the right idea. Sometimes it’s nice to have content fit inside a box smaller than itself. Scrollbars can be ugly at times, so a Javascript scroller can be a clean way to implement this.
This is a script I actually made a long time ago for a client, but recently expanded upon it for another client and decided to make it a general, reusable script.
Example: Here
Javascript: Here
Basically it’s just an array of elements in a smaller container and it scrolls left or right and at different speeds depending on where the mouse is.
After the page loads, to make a container into a scroller, call the initScroller function passing it a json object with the following properties:
- id required – The id of the HTML element to use.
- width required – The width of the HTML element specified by
id. - height required – The height of the HTML element specified by
id. - speed Default: 1 – The max speed at which to scroll. This number represents max pixels per “frame,” but basically the higher, the faster.
- neutral Default: 0.25 – This is the amount of neutral space, or area which does not cause motion. The higher it is, the wider this zone is. The minimum value is 0 (no neutral zone) and the max value should be
speed. Technically, its the speed under which for the scroller to not move at all. - switchDirection Default: false – By default the scroller scrolls to the right when the mouse is on the right, and left when the mouse is on the left. Setting this value to
truemakes the opposite happen. - framerate Default: 50 – The higher the value, the faster the animation interval is. Increasing this value will make for smoother but more CPU intensive animation and reducing the value should have the inverse effect. Note that changing this value has side effects for the speed of the scroll. The default value should suffice in most situations.
As shown on the example, multiple scrollers can be on one page without any variable interference.
Do note that the script should be called after the page has been rendered. Because of this, the container may need some CSS is make it “pretty” while the page is still loading such as the dimensions andoverflow: hidden, depending on the other styles in the document.