Vanilla marquee

Vanilla marquee is a modern implementation of jQuery.marquee

Installation

You can install vanilla marquee via npm:

npm i vanilla-marquee

or via jsdelivr using script type="module":

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ) );

Markup

You can use any markup you want

Options

Refer to the Documentation

Examples

Default config

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ) );

Changing speed

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  speed: 200
});

Changing direction

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  delayBeforeStart: 0
  direction:        'right',
  speed:            10,
});

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
delayBeforeStart: 0
direction:        'down',
speed:            10,
});

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
delayBeforeStart: 0
direction:        'up',
speed:            10,
});

Using easing animations

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  css3easing: 'ease',
  speed:      100,
});

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  css3easing: 'ease-in',
  speed:      100,
});

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  css3easing: 'ease-out',
  speed:      100,
});

Pausing on hover

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  pauseOnHover: true
});

No gap

Vanilla marquee is awesome!

import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee/dist/vanilla-marquee.js';

new marquee( document.getElementById( 'marquee' ), {
  duplicated: true,
  gap:        0,
  speed:      200,
});