ClickSpark.js
ClickSpark.js is a javascript utility that adds beautiful particle effects to your javascript events.
Add image-files as single particles and configure where and when a particle fountain should be fired.
TEST THE DEMO
Install
-
Installation with npm: packagename "clickspark.js"
$ npm install clickspark.js
-
Installation with bower.io: packagename "clickspark"
$ bower install clickspark
-
Manual installation: copy and link the file clickspark.min.js to your project
clickspark.min.js
Usage
Automatic click binding (default particle effect)
use jQuery to add ClickSpark to HTML-elements:
;
On a click on the h1 the default sparkling effect will be fired.
Automatic configured click binding (customized particle effect)
use jQuery to add ClickSpark to HTML-elements. Configure particle attributes for example like this:
;
Attribute | default | type |
---|---|---|
particleImagePath | string | |
particleCount | 35 | int |
particleSpeed | 12 | int |
particleSize | 12 | int |
particleRotationSpeed | 0 | int |
particleDuration | 400 | int |
animationType | 'explosion' | string |
callback | func() |
animationTypes:
- explosion
- splash
- falloff
- blowright
- blowleft
Independent particle binding (default particle effect)
use jQuery to fire ClickSpark independently for example like this:
;
The particles will be targeted to the center position of the HTML-element with the className ".sparklingDiv". So the particle target can be placed everywhere via CSS.
Global particle configuration
use these ClickSpark methods to set the attributes for your particle effect:
clickSpark; clickSpark; clickSpark; clickSpark; clickSpark; clickSpark; clickSpark; clickSparksetCallback: { /*do something, follow href for example*/ };
Dependencies
- jQuery
Browser Support
Browser | |||||
---|---|---|---|---|---|
Version | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |