https://github.com/omnedia/ngx-shiny-text
A simple component library to animate text.
https://github.com/omnedia/ngx-shiny-text
Last synced: about 1 month ago
JSON representation
A simple component library to animate text.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-shiny-text
- Owner: omnedia
- License: mit
- Created: 2024-08-20T09:03:36.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-12-12T01:41:08.000Z (5 months ago)
- Last Synced: 2025-04-15T02:44:12.698Z (about 1 month ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-shiny-text (⭐0) - An Angular library that provides a shimmering text animation effect. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-shiny-text - An Angular library that provides a shimmering text animation effect. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-shiny-text - An Angular library that provides a shimmering text animation effect. (Table of contents / Third Party Components)
README
# ngx-shiny-text
This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com
`@omnedia/ngx-shiny-text` is an Angular library that provides a shimmering text animation effect. This component allows you to easily add a glowing, moving shimmer effect over text, making your text stand out with a visually appealing style.
## Features
- Shimmering animation effect for text.
- Customizable shimmer color, text color, and shimmer width.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-shiny-text
```
## Usage
Import the `NgxShinyTextComponent` in your Angular module or component:
```typescript
import {NgxShinyTextComponent} from '@omnedia/ngx-shiny-text';
@Component({
...
imports:
[
...
NgxShinyTextComponent,
],
...
})
```
Use the component in your template:
```html
```
## API
```html
```
- `text` (required): The text content to be displayed with the shimmering effect.
- `shimmerColor` (optional): The color of the shimmer effect. Accepts any valid CSS color value.
- `textColor` (optional): The color of the text. Accepts any valid CSS color value.
- `shimmerWidth` (optional): The width of the shimmer effect in pixels or percentages. Defaults to 100px.
- `styleClass` (optional): A custom CSS class to apply to the shimmering text element.
## Example
```html
```
This will create a shimmering text effect where the text "Welcome to our site!" is displayed with a golden shimmer and a custom text color.
## Styling
To customize the appearance of the shimmering text or container, use the styleClass input to apply your own CSS classes.
```css
.shiny-text-style {
font-size: 36px;
font-weight: bold;
font-family: 'Arial', sans-serif;
}
```
This will style the shimmering text with a custom font size, weight, and font family.
## 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.