Marquee

The marquee component allows you to create animated content mimicking the old marquee element with modern support.

@import 'compotes/css/marquee';

import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee')

The structure consists of a list of elements. All animations are CSS based.

<div class="c-marquee">
  <ul class="c-marquee-container">
    <li>This is the default marquee</li>
    <li>Marquee or marquii</li>
  </ul>
</div>

You are not limited to text. You can also add any kind of valid HTML like images.

Accessibility

• The marquee is tabbable and pauses when focused via keyboard.
• If the user has configured prefers-reduced-motion in their browser, the marquee animation will not be played.
• If you are using the fill option, all cloned elements will be set to aria-hidden to hide the unnecessary content to the screen reader and not be tabbable thanks to a tabindex="-1".

Options

You can change some options from the component.

import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee', {
  init: true, 
  fill: false,
  direction: 'right',
  behavior: 'scroll',
  duration: 1,
  mutationObserver: true,
  on: undefined,
})

• init (boolean): Init the component on creation
• fill (boolean): Fill the marquee to make a loop
• direction ('left' | 'right' | 'up' | 'down'): Direction of marquee animation
• behavior ('scroll' | 'alternate'): The behavior of the marquee animation
• duration (number or string): The duration of the marquee animation
• mutationObserver (boolean): Use MutationObserver to update component on changes
• on (object): events to listen to

Methods

The marquee component provides several methods to init and destroy it. You can also control the marquee animation.

import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee', {
  init: false
})
marquee.init()

• init(): Init the component
• destroy(): Destroy the component
• update(): Update the marquee component
• play(): Play the marquee component
• pause(): Pause the marquee component

Data

You can access data from the component like this:

import { Marquee } from 'compotes'

const marquee = new Marquee('#my-marquee')
console.log(marquee.isPaused)

• options (options object): Get options used to init the component
• isPaused (boolean): Whether the marquee is paused

Events

You can listen to emitted events directly on the marquee element like this:

import { Marquee } from 'compotes'

const marqueeEl = document.querySelector('.c-marquee')
const marquee = new Marquee(marqueeEl)

marqueeEl.addEventListener('c.marquee.init', (e) => { 
  console.log(e.detail)// marquee object
})

• c.marquee.init: On component init
• c.marquee.play: On component marquee play
• c.marquee.pause: On component marquee pause
• c.marquee.loop: On component marquee loop
• c.marquee.destroy: On component destroy