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,
});