https://github.com/omnedia/ngx-ripple
A simple component library to create a container with an animated background.
https://github.com/omnedia/ngx-ripple
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an animated background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-ripple
- Owner: omnedia
- License: mit
- Created: 2024-08-17T21:00:46.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-12-12T01:41:19.000Z (5 months ago)
- Last Synced: 2025-02-28T22:19:57.656Z (about 2 months ago)
- Language: SCSS
- Size: 5.86 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-ripple (⭐1) - This component creates an expanding ripple effect with customizable color, border, and animation duration. Perfect for adding an interactive and engaging effect to backgrounds or containers in your application. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-ripple - This component creates an expanding ripple effect with customizable color, border, and animation duration. Perfect for adding an interactive and engaging effect to backgrounds or containers in your application. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-ripple - This component creates an expanding ripple effect with customizable color, border, and animation duration. Perfect for adding an interactive and engaging effect to backgrounds or containers in your application. (Table of contents / Third Party Components)
README
# ngx-ripple
This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com
`@omnedia/ngx-ripple` is an Angular library that provides a ripple animation effect for your Angular components. This component creates an expanding ripple effect with customizable color, border, and animation duration. Perfect for adding an interactive and engaging effect to backgrounds or containers in your application.
## Features
- Ripple animation with customizable colors and animation duration.
- Easy to integrate as a standalone component.
- Adds a dynamic ripple effect that can enhance the design of your application.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-ripple
```
## Usage
Import the `NgxRippleComponent` in your Angular module or component:
```typescript
import {NgxRippleComponent} from '@omnedia/ngx-ripple';
@Component({
...
imports:
[
...
NgxRippleComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- rippleColor (optional): The color of the ripple effect. Accepts any valid CSS color value (e.g., 'rgba(0, 255, 255, 0.5)', '#00ffff').
- rippleBorderColor (optional): The color of the ripple's border. Accepts any valid CSS color value.
- animationDuration (optional): The duration of the ripple animation. Accepts any valid CSS time value (e.g., '3s', '5s').
- styleClass (optional): A custom CSS class to apply to the component's wrapper element.
## Example
```html
This is a ripple background effect
```
This will create a ripple effect with pink-colored ripples and a custom border color that animates over a 2-second duration.
## Styling
To customize the appearance of the ripple or the container, use the styleClass input to apply your own CSS classes.
```css
.ripple-background {
background-color: #000;
height: 100vh;
position: relative;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 50px;
}
```
## 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.