Awesome

angular-particle-effect-button (demo)

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.

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 {}

<button libParticleEffectButton [pHidden]="hidden" (click)="hidden=!hidden">Hide me</button>

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:

<div style="position: relative; display: inline-block;">
  <div style="position: relative; display: inline-block; overflow: hidden;">
    <button libparticleeffectbutton="">Hide me</button>
  </div>
  <canvas style="position: absolute; pointer-events: none; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); display: none;">
  </canvas>
</div>

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.

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.

Awesome

angular-particle-effect-button (demo)

Install

Usage

Props

Related

Development

Library

Project

License