Introducing ClickSpark.js – Open Source Particle Effects!

As an often implemented UI effect in some of our recent projects, it was an obvious next step to make a reusable tool for creating particle effects.

So we’ve built ClickSpark.js
ClickSpark.js is an open source particle effect tool for the frontend. It’s based on JavaScript and HTML5. This little tool is available at GitHub and also on bower.io as with all the other tiny and fancy js tools you can find on the web.
ClickSpark.js adds beautiful particle effects to yourJavaScript events. The special feature is that image files can be used as single particles. It’s easily configurable and flexible.

Test it

Test ClickSpark.js on this demo page.

Install

  • Installation with bower.io: packagename “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

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:

That’s it – simple! Let me know if you make anything cool with this :-)

 

 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">