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.



Automatic click binding
default particle effect

Use jQuery to add ClickSpark to HTML-elements. On a click on the button-tag 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 with particle rotation like this

Automatic configured click binding
customized particle effect with callback function

Use jQuery to add ClickSpark to HTML-elements. Configure particle attributes for example with a custom animation type like this and make a callback after animation is ready

Independent particle binding
customized particle effect

Use jQuery to fire ClickSpark independently for example. 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.

$('.button-1').clickSpark();
$('.button-2').clickSpark({
  particleImagePath: '../particle-2.png',
  particleCount: 35,
  particleSpeed: 10,
  particleSize: 15,
  particleDuration: 400,
  particleRotationSpeed: 20
});
$('.button-3').clickSpark({
  particleImagePath: '../particle-3.png',
  particleCount: 55,
  particleSpeed: 10,
  particleSize: 12,
  particleRotationSpeed: 0,
  animationType:'blowleft'
  callback: function () {
    $('.callbackDiv').show();
  }
});
$(document).ready(function () {
  $('.button-4').click(function () {
    clickSpark.fireParticles($('.sparklingDiv'));
  });
});

DEMO

DEMO

DEMO

callback func called:
animation ready, follow href for example

DEMO

target div
Fork me on GitHub