ngx-fast-marquee

Ngx Fast Marquee

Description

Welcome to the 🌟 Ngx Marquee Library 🌟! This library provides an easy-to-use and customizable marquee component for your Angular applications.

Inspired by React-Fast-Marquee

🛠️ Installation

Install the library using your favorite package manager:

• npm

npm i ngx-fast-marquee

• pnpm

pnpm i ngx-fast-marquee

• yarn

yarn add ngx-fast-marquee

• bun

bun add ngx-fast-marquee

🚀 Getting Started

Import the NgxFastMarqueeModule in your AppModule:

import { NgxFastMarqueeModule } from 'ngx-fast-marquee';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxFastMarqueeModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use the ngx-fast-marquee component in your templates:

<ngx-fast-marquee>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</ngx-fast-marquee>

📚 Documentation

In progress...🚧

Marquee Inputs:

• speed - The speed of the marquee in pixels per second. Also can be qualitative, fast, medium, slow. Default: medium.
• direction - The direction of the marquee (left, right, up, down).Default: left.
• autoFill - true for auto filling the space. Default: true.
• useSystemReducedMotion - true for avoid animate the marquee when the system has reduced motion. Default: false.
• maskStartPercentage - Start percentage of the mask. Suitable Range: 0 - 100, where 100 is the middle of the marquee. Default: 0.
• maskEndPercentage - End percentage of the mask. Suitable Range: 0 - 100, where 100 is the middle of the marquee. Default: 0.
• maskPercentage - Percentage of the mask. Suitable Range: 0 - 100, where 100 is the middle of the marquee (start to center and end to the center). Default: 0.
• play - true for playing the marquee animation, otherwise the animation is paused. Default: true.
• pauseOnClick - true for pausing the marquee when the cursor is held down on the marquee. Default: false.
• pauseOnHover - true for Pausing the marquee when the mouse is over it. Default: false.

Marquee Outputs:

• mounted - Event emitted when the marquee is in the view. Emitted only once.
• updated - Event emitted each time the marquee is updated.

📄 License

This project is licensed under the MIT License.