Home

Awesome

ngx-ripple

@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

Installation

Install the library using npm:

npm install @omnedia/ngx-ripple

Usage

Import the NgxRippleComponent in your Angular module or component:

import { NgxRippleComponent } from '@omnedia/ngx-ripple';

@Component({
  ...
  imports: [
    ...
    NgxRippleComponent,
  ],
  ...
})

Use the component in your template:

<om-ripple
  [rippleColor]="'rgba(0, 255, 255, 0.5)'"
  [rippleBorderColor]="'#00ffff'"
  [animationDuration]="'3s'"
  styleClass="custom-ripple-class"
>
  <div>Your content here</div>
</om-ripple>

API

<om-ripple
  [rippleColor]="rippleColor"
  [rippleBorderColor]="rippleBorderColor"
  [animationDuration]="animationDuration"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-ripple>

Example

<om-ripple
  [rippleColor]="'rgba(255, 105, 180, 0.6)'"
  [rippleBorderColor]="'#ff69b4'"
  [animationDuration]="'2s'"
  styleClass="ripple-background"
>
  <div class="content">This is a ripple background effect</div>
</om-ripple>

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.

.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.