Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-cryptic-text
A simple component library to animate text.
https://github.com/omnedia/ngx-cryptic-text
Last synced: about 1 month ago
JSON representation
A simple component library to animate text.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-cryptic-text
- Owner: omnedia
- License: mit
- Created: 2024-08-18T16:12:21.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-24T13:35:37.000Z (5 months ago)
- Last Synced: 2024-10-29T21:30:24.177Z (2 months ago)
- Language: TypeScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - ngx-cryptic-text (⭐0) - An Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-cryptic-text - An Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-cryptic-text - An Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear. (Table of contents / Third Party Components)
README
# ngx-cryptic-text
`@omnedia/ngx-cryptic-text` is an Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear, creating a mysterious or glitchy effect that can be used for titles, headings, or any text content in your Angular applications.
## Features
- Cryptic text animation effect that gradually resolves into the target text.
- Customizable animation speed.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-cryptic-text
```
## Usage
Import the NgxCrypticTextComponent in your Angular module or component:
```typescript
import { NgxCrypticTextComponent } from '@omnedia/ngx-cryptic-text';
@Component({
...
imports: [
...
NgxCrypticTextComponent,
],
...
})
```
Use the component in your template:
```html
```
## API
```html
```
- `text` (required): The target text to be revealed by the animation.
- `animationSpeed` (optional): The duration of the entire animation in milliseconds. Defaults to 800ms.
- `styleClass` (optional): A custom CSS class to apply to the text element for styling.
## Example
```html
```
This will create a cryptic text animation where the text "Cryptic Text Effect!" is gradually revealed over a duration of 1200ms.
## Styling
You can apply custom styles to the text using the styleClass input. For example:
```css
.cryptic-text-style {
font-size: 24px;
color: #ff69b4;
font-family: 'Courier New', Courier, monospace;
}
```
This will style the cryptic text with a custom font size, color, 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.