Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-marquee
A simple component library to create an infinite scrolling marquee with your content.
https://github.com/omnedia/ngx-marquee
Last synced: 15 days ago
JSON representation
A simple component library to create an infinite scrolling marquee with your content.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-marquee
- Owner: omnedia
- License: mit
- Created: 2024-08-25T14:21:36.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-25T09:01:04.000Z (3 months ago)
- Last Synced: 2024-11-09T03:06:24.625Z (about 1 month ago)
- Language: TypeScript
- Size: 8.79 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-marquee (⭐1) - A simple component library to create an infinite scrolling marquee with your content. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-marquee - A simple component library to create an infinite scrolling marquee with your content. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-marquee - A simple component library to create an infinite scrolling marquee with your content. (Table of contents / Third Party Components)
README
# ngx-marquee
`@omnedia/ngx-marquee` is an Angular library that provides a customizable marquee component with animation controls for scrolling content horizontally or vertically. The component offers flexible configuration options such as animation speed, direction (horizontal or vertical), reverse mode, gap size, and an option to pause the marquee on hover.
## Features
- Customizable scrolling marquee with horizontal or vertical movement.
- Options for controlling animation speed, direction, and reverse scrolling.
- Supports pausing the marquee when hovered.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-marquee
```
## Usage
Import the `NgxMarqueeComponent` in your Angular module or component:
```typescript
import { NgxMarqueeComponent } from '@omnedia/ngx-marquee';
@Component({
...
imports: [
...
NgxMarqueeComponent,
],
...
})
```
Use the component in your template:
```html
Item 1
Item 2
Item 3
```
How It Works
- Customizable Direction and Animation: You can set the marquee to scroll content horizontally or vertically by setting the vertical input. You can also control the speed, gap between items, reverse the scroll direction, and pause the scroll when hovered.
- Global and Custom Styling: The .om-marquee container can be styled globally or with a custom styleClass. Content elements inside the marquee retain their parent component styling, allowing flexibility in their design.
## API
```html
```
- `reverse` (optional): A boolean to reverse the scroll direction. Defaults to false.
- `animationDuration` (optional): The duration of the scroll animation. Accepts any valid CSS time value (e.g., '20s', '10s').
- `marqueeGap` (optional): The gap between the marquee items. Accepts any valid CSS size value (e.g., '1rem', '2rem').
- `pauseOnHover` (optional): A boolean to pause the scroll animation when the marquee is hovered. Defaults to true.
- `vertical` (optional): A boolean to switch the marquee to vertical scrolling mode. Defaults to false.
- `styleClass` (optional): A custom CSS class to apply to the .om-marquee container for additional styling.
## Example
```html
Item A
Item B
Item C
```
This will create a marquee that scrolls content horizontally, with an animation duration of 15 seconds and a gap of 1 rem between each item.
## Styling
`.om-marquee`
- The main container for the marquee effect. You can apply global or custom styles using the styleClass input. The marquee content will automatically scroll in the specified direction based on the component's configuration.
### Example of Global and Custom Styling
In this example, the marquee container is customized with a background color and padding, while the items inside the marquee retain their original styles:
```html
News Update 1
News Update 2
```
```css
.marquee-custom-style {
background-color: #333;
padding: 1rem;
color: #fff;
}
.item-1 {
font-size: 1.5rem;
color: #ffcc00;
}
.item-2 {
font-size: 1.5rem;
color: #00ffcc;
}
```
## Contributing
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.