Marquee.js: Reference Manual & API Guide

1. Installation & Setup

# Install via NPM
npm install @modracx/marquee-js

# Or include via CDN script tag
<script src="https://cdn.jsdelivr.net/npm/@modracx/marquee-js/dist/marquee.min.js"></script>

2. HTML Markup & JavaScript Initialization

<!-- HTML Container -->
<div class="marquee-track" id="partner-logos">
  <div class="marquee-item">Magento 2</div>
  <div class="marquee-item">Shopify Plus</div>
  <div class="marquee-item">PostgreSQL</div>
  <div class="marquee-item">Next.js App Router</div>
  <div class="marquee-item">Docker & Linux</div>
</div>

import { Marquee } from '@modracx/marquee-js';

const marquee = new Marquee('#partner-logos', {
  speed: 45,            // Pixels per second
  direction: 'left',    // 'left' | 'right' | 'up' | 'down'
  pauseOnHover: true,   // Pause motion when mouse enters track
  gap: 32,              // Spacing between repeated loops in px
  autoFill: true        // Clone items automatically to fill viewport width
});

3. Options & API Configuration

4. Programmatic Methods

// Pause / Resume animation
marquee.pause();
marquee.play();

// Update velocity dynamically
marquee.setSpeed(120);

// Reverse current direction
marquee.reverse();

// Destroy instance and restore original DOM tree
marquee.destroy();