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 are all the other tiny 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 add ClickSpark to HTML-elements. Configure particle attributes for example like this:

 

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 :-)

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *