Ngx-fast-marquee NPM

Ngx Fast Marquee

Description

Want to bring your website to life with dynamic, eye-catching marquees?

Look no further! The ✨ Ngx Fast Marquee ✨ is a lightweight component that can bring to life your Angular applications through fast and user-friendly marquee animations.

See the Demo section below for a live example!

🖥️ Demo

See Ngx Fast Marquee in action!

📱 Web Demo
🎮 StackBlitz

🛠️ Installation

Install the library using your favorite package manager:

npm i ngx-fast-marquee

pnpm

pnpm i ngx-fast-marquee

yarn

yarn add ngx-fast-marquee

bun add ngx-fast-marquee

Angular Compatibility

Angular Version	Library Version
`>=12`	`0.2.0`

🚀 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

Marquee Inputs:

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