Scrolling Text Ticker with jQuery

The crawlLine plugin creates a horizontally scrolling text ticker — the kind you see on news sites and financial dashboards. It takes a list of items, joins them with a configurable separator, and animates them across the container in a continuous loop. Hovering over the ticker pauses it, making it easier for users to read individual items.

Basic Usage

$(document).ready(function() {
    $('#ticker').crawlLine({
        speed: 2,
        direction: 'left',
        pauseOnHover: true,
        separator: ' • '
    });
});

HTML Structure

Wrap a <ul> inside a fixed-width container. The container clips the overflow so only a portion of the list is visible at any time:

<div id="ticker-wrap">
    <ul id="ticker">
        <li>First news item here</li>
        <li>Second news item here</li>
        <li>Third news item</li>
    </ul>
</div>

Required CSS

The ticker needs a few CSS rules to function correctly. The wrapper must hide overflow, and the list items must be laid out inline so they form a single horizontal line:

#ticker-wrap { overflow: hidden; width: 100%; }
#ticker { white-space: nowrap; list-style: none; }
#ticker li { display: inline; padding: 0 20px; }

Parameters

• speed — Number of pixels moved per animation frame. Lower values produce a slower, smoother crawl. Default: 2.
• direction — 'left' scrolls the text from right to left (standard ticker direction). 'right' reverses the direction. Default: 'left'.
• pauseOnHover — When true, the animation stops while the mouse cursor is over the ticker and resumes when the cursor leaves. Greatly improves readability. Default: true.
• separator — A string inserted between each list item in the rendered output. Use HTML entities for special characters — for example ' • ' renders a bullet point between items. Default: ' | '.

How the Loop Works

The plugin measures the total rendered width of the list. When the list has scrolled fully off the left edge of the container, its position is instantly reset to the right edge — creating the illusion of an infinite loop. The animation itself runs on a setInterval rather than a CSS transition, which gives fine-grained control over speed and makes it easy to pause and resume programmatically.

Demo

See the ticker in action: Live demo — crawlLine.