Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-word-pullup
A simple component library to animate text.
https://github.com/omnedia/ngx-word-pullup
Last synced: about 1 month ago
JSON representation
A simple component library to animate text.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-word-pullup
- Owner: omnedia
- License: mit
- Created: 2024-08-13T11:04:12.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-22T14:33:44.000Z (5 months ago)
- Last Synced: 2024-11-07T00:07:34.093Z (2 months ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-word-pullup (⭐0) - An Angular library that provides a smooth pull-up animation effect for words. This component is designed to sequentially pull up and reveal words with a customizable delay. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-word-pullup - An Angular library that provides a smooth pull-up animation effect for words. This component is designed to sequentially pull up and reveal words with a customizable delay. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-word-pullup - An Angular library that provides a smooth pull-up animation effect for words. This component is designed to sequentially pull up and reveal words with a customizable delay. (Table of contents / Third Party Components)
README
# ngx-word-pullup
`@omnedia/ngx-word-pullup` is an Angular library that provides a smooth pull-up animation effect for words within Angular applications. This component is designed to sequentially pull up and reveal words with a customizable delay.
## Features
- Pull-up animation for displaying words sequentially.
- Fully customizable animation speed and style.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-word-pullup
```
## Usage
Import the `NgxWordPullupComponent` in your Angular module or component:
```typescript
import { NgxWordPullupComponent } from '@omnedia/ngx-word-pullup';
@Component({
...
imports: [
...
NgxWordPullupComponent,
],
...
})
```
Use the component in your template:
```html
```
## API
```html
```
- `words`: An array of strings or a single string to be animated. If a single string is provided, it will be split into individual words.
- `wordDelay`: (optional) The delay between the appearance of each word in milliseconds. Minimum value is 100 ms. Default is 200 ms.
- `styleClass`: (optional) A custom CSS class to apply to the component's wrapper element.
## Example
```html
```
This will animate each word of the sentence with a 150ms delay between them.
## Styling
To customize the appearance of the words or the container, use the styleClass input to apply your own CSS classes.
```css
.example-class {
font-size: 24px;
color: #333;
}
```
## 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.