demo)
angular-particle-effect-button (Superb particle effect buttons for Angular.
This is a Angular directive used as port of an awesome Codrops Article by Luis Manuel (original source).
Install
npm i --save angular-particle-effect-button
Usage
Check out the Demo to see it in action.
;;;;
Hide me
Note that libParticleEffectButton
can be added to anything from a simple <button>
to a complex Angular subtree. The element for which you'll add libParticleEffectButton
will be wrapped into a tree like that:
Hide me
Changing the hidden
boolean property will trigger an animation, typically as a result of a click on the button's contents.
If hidden
changes to true
, the button will perform a disintegrating animation. If hidden
changes to false
, it will reverse and reintegrate the original content.
Props
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) |
pSpeed |
number | func | random(2) |
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.
Related
- anime.js - Underlying animation engine.
- ParticleEffectsButtons - Original source this library is based on.
- Codrops Article - Original article this library is based on.
Development
This module was bootstrapped with angular-cli so it's using the common build/test/lint commands from angular-cli.
Library
- Build: ng build angular-particle-effect-button
- Test: ng test angular-particle-effect-button
- Lint: ng lint angular-particle-effect-button
Project
- See it in action: ng serve
License
MIT © danielpdev