> Superb particle effect buttons for Angular 6.
npm install @sambaptista/angular-particle-effect-button> Superb particle effect buttons for Angular 6.
This is a Angular 6 directive used as port of an awesome Codrops Article by Luis Manuel (original source).
``bash`
npm i --save angular-particle-effect-button
Check out the Demo to see it in action.
`ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ParticleEffectButtonModule } from "angular-particle-effect-button";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ParticleEffectButtonModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
`
`html`
Note that libParticleEffectButton can be added to anything from a simple
Changing the hidden boolean property will trigger an animation, typically as a result of a click on the button's contents. hidden
If changes to true, the button will perform a disintegrating animation. If hidden changes to false, it will reverse and reintegrate the original content.
| Property | Type | Default | Description |
|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
| pHidden | boolean | false | Whether button should be hidden or visible. Changing this property starts an animation. |pColor
| | string | '#000' | Particle color. Should match the button content's background color |pDuration
| | number | 1000 | Animation duration in milliseconds. |pEasing
| | string | 'easeInOutCubic' | Animation easing. |pType
| | string | circle | 'circle' or 'rectangle' or 'triangle' |pStyle
| | string | fill | 'fill' or 'stroke' |pDirection
| | string | 'left' | 'left' or 'right' or 'top' or 'bottom' |pCanvasPadding
| | number | 150 | Amount of extra padding to add to the canvas since the animation will overflow the content's bounds |pSize
| | number | func | random(4) | Particle size. May be a static number or a function which returns numbers. |pSpeed
| | number | func | random(2) | Particle speed. May be a static number or a function which returns numbers. |pParticlesAmountCoefficient
| | number | 3 | Increases or decreases the relative number of particles |pOoscillationCoefficient
| | number | 30 | Increases or decreases the relative curvature of particles |pBegin
| | EventEmitter | EventEmitter | Callback to get notified when the animation starts. |pComplete` | EventEmitter | EventEmitter | Callback to get notified when the animation completes. |
|
I've tried to keep the properties and behavior exactly the same as in the original codrops version.
- anime.js - Underlying animation engine.
- ParticleEffectsButtons - Original source this library is based on.
- Codrops Article - Original article this library is based on.
MIT © danielpdev