Create Customizable Omnidirectional Marquees – Manawave

Manawave is a dependency-free JavaScript library for creating customizable, dynamic, and omnidirectional scrolling content on your website.

It can be implemented as a web component or using existing HTML elements, which means that you can enhance your site with smooth, customizable marquee effects with just plain HTML, CSS, and JavaScript.

The marquees (scrolling content) allow for omnidirectional movement, including horizontal, vertical, and diagonal scrolling. The speed and direction can be customized through attributes. Automated looping creates seamless perpetual marquees.

How to use it:

1. Install and import the Manawave.

import "manawave";

// OR
<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/manawave.min.js"
></script>

2. Wrap your content to the manawave-marquee Custom Element and config the marquee effect using the following attributes:

• speed: animate speed
• direction: direction in angles
• autoplay: autoplay or not

<manawave-marquee speed="2" direction="45" autoplay>
  CSSScript.Com &nbsp;
</manawave-marquee>

3. You can also implement it on your existing element as follows:

<div 
  id="example" 
  data-speed="2" 
  data-direction="45" 
  data-autoplay="true">
  Any HTML Content Here
</div>

import { MW } from "manawave";
const MWSelector = new MW("#example");

4. Override the configs.

mw.speed = 1.5;
mw.direction = 180;
mw.autoplay = false;

5. Play the marquee effect manually.

mw.play();

6. Events.

mw.onLayout = ({ position, limits, initialSize }) => {
  return {
    size: { width: initialSize.width + 10, height: initialSize.height + 10 },
    position: { x: position.x + 1, y: position.y + 1 },
  };
};
mw.onMove = ({ direction, speed, dt, t }) => {
  return { direction: 999 };
};
mw.onLoop = ({ limits, itemSize, marqueeSize, direction }) => {
  return {
    limits: {
      up: limits.up + 1,
      right: limits.right + 1,
      left: limits.left - 1,
      down: limits.down - 1,
    },
  };
};
mw.onElementCreated = ({ element, id }) => {
  element.style.background = "red";
};
mw.onElementCreated = ({ element, id, dt, t }) => {
  element.textContent = t;
};
mw.onElementCreated = ({ element, id }) => {
  element.style.background = "initial";
};

7. Get each element in the component.

mw.eachElement(({ element, id }) => {
  element.style.background = "green";
});

8. Get the instance.

getMW(element);