Seamless Scrolling Marquee Plugin for JavaScript – Smarquee

Preview:

Description:

Smarquee is a JavaScript plugin that generates a scrolling marquee from any text content using CSS3 @keyframes.

How to use it:

1. Import the smarquee.min.js script into the document.

<script src="smarquee.min.js"></script>

2. Add the id="smarquee" attribute to the text container.

<h2 id="smarquee">
  Your Text Here
</h2>

3. Initialize the Smarquee plugin.

const smarquee = new Smarquee({
      // options here
});
smarquee.init();

4. Config the marquee effect.

const smarquee = new Smarquee({
       
      // selector of text container
      selector: '#smarquee',
      // you can select your own element and pass it in here.
      element: null, 
      // animation speed
      velocity: 50,
      // animation options
      styleOptions: {
        scrollingTitleMargin: 24, 
        animationName: 'marquee', 
        timingFunction: 'linear', 
        iterationCount: 'infinite', // 'numbers' or 'infinite'.
        fillMode: 'none', // 'none', 'forwards', 'backwards', or 'both'.
        playState: 'running', // 'running' or 'paused'
        delay: '0', 
        pausePercent: 30,
      },
});

5. Callback functions.

const smarquee = new Smarquee({
      onAnimationStart() {},
      onAnimationIterate() {},
      onAnimationEnd() {},
      onAnimationCancel() {},
      onClick() {}
});
smarquee.init();

6. API methods & props.

smarquee.init(start = true)
smarquee.pause()
smarquee.play()
smarquee.restart()
smarquee.deactivate()
smarquee.activate()
smarquee.updateText(text, delay = 0, start = true)
smarquee.updateIterationCount(iterations)
smarquee.updateFillMode(fillMode)
smarquee.updateDelay(delay)
smarquee.updateTimingFunction(timingFunction)
smarquee.resetStyleProperties()
smarquee.deInit()
smarquee.destroy()