Package Exports

clickspark.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (clickspark.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

$('h1').clickSpark();

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:

$('h1').clickSpark({     
    particleImagePath: '../particle.png',     
    particleCount: 35,     
    particleSpeed: 12,     
    particleSize: 12,
    particleRotationSpeed: 20,
    particleDuration: 400,  
    animationType: 'explosion',
    callback: function() { /*do something, follow href for example*/ } 
});

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:

$(document).ready(function () {
    $('button').click(function () {
        clickSpark.fireParticles($('.sparklingDiv'));
    });
});

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.setParticleCount(50);
    clickSpark.setParticleSize(12);
    clickSpark.setParticleSpeed(12);
    clickSpark.setParticleImagePath('../particle.png');
    clickSpark.setParticleRotationSpeed(20);
    clickSpark.setParticleDuration(400);
    clickSpark.setAnimationType('explosion');
    clickSpark.setCallback: (function() { /*do something, follow href for example*/ });

Dependencies

jQuery

Browser Support

Browser
Version	4.0	9.0	2.0	3.1	9.0