Vanilla JavaScript Marquee Demo

BeMarquee Live Examples

Download This Plugin Back To jQueryScript

A jQuery & Vanilla JS marquee plugin for horizontal and vertical scrolling strips with loop, pause on hover, click toggle, and inline JSON config.

Pure JavaScript
Hover Reverse
Optional Click Pause
Horizontal And Vertical
No Build Required
Single File Demo

Continuous Horizontal Flow

This preserves the original horizontal demo, then presents it in a wider editorial track with click pause and hover reverse for easier interaction testing.

Original Demo Preserved
Gap 40 Reverse On Hover Pause On Click
Release NotesUse this format for product headlines, launch tags, or feature strips.
Event TimelineKeep spacing wide enough when cards include multi-line labels and details.
Brand MessagesHover once to reverse direction. Click anywhere inside the track to pause.
Promo LabelsThe script duplicates content when looping needs more width.

Vertical Auto-Height Loop

This keeps the original vertical example and expands it into a stacked announcement rail that grows to fit its content.

Original Demo Preserved
Vertical Auto Height Loop Reverse On Hover
Status UpdateVertical mode works well for bulletins, store notices, and compact dashboard feeds.
Queue NoticeAuto height removes the need to manually tune container height for short content sets.
Editor PickHover over the module to flip the travel direction without reloading the page.
Support WindowLooping continues as long as enough content exists to duplicate inside the inner wrapper.

Right-To-Left Alternative

This variation switches the direction so the same component can match ticker layouts that enter from the left edge and move right.

Direction Control
Direction Right Pause On Hover Gap 24
Top Stories
Product Alerts
Store Credits
Member Deals
Updated Inventory
Daily Schedule

Delayed Start Headlines

A start delay gives the viewer a brief reading window before movement begins, which suits hero highlights and announcement bars.

Start Delay
Delay 1400ms Speed 1.4 Hover Pause
24/7Service availability label for dashboards, portal headers, or maintenance notice strips.
5 RegionsUseful when each item needs both a short metric and a supporting line.
3 ModesMotion starts after a short delay, so the initial content remains readable.
1 ScriptNo compile step is required for this standalone demo page.

Clickable Pause Rail

This layout uses compact tokens to show how the marquee behaves when users need to freeze a moving list and inspect a single item.

Interaction Focus
Pause On Click Gap 16 Speed 1.2
Minimal API
Looping Track
Click To Stop
Click To Resume
Small Content Cards
Inline Labels
Simple Markup

Single-Pass Non-Looping Track

Looping can be disabled when the marquee should stop after a full pass, which helps with finite updates or one-time notice strips.

Finite Motion
Loop False Speed 1 Pause On Hover
Stage OneThe content moves across the viewport once instead of repeating forever.
Stage TwoUse finite motion when the track should behave more like a guided reveal.
Stage ThreeHover pause still works until the strip reaches its natural stopping point.

Open this file directly in a browser to preview every example with the local bemarquee.js script.