Sunday, January 2, 2011

[JQ] Sparks particle system


This script got an UPDATE to v 2.0, check here
Here's yet another jQuery effect I've created for you.
This time, I've made a very easy to use particle system

Hover the mouse over the picture above.
I noticed that it works best in Google Chrome... In older versions of IE and firefox it seems to run a little slow.
I've tried to make it as easy as it can be. All you need to do is to link to these js files:
<script src="" type="text/javascript"></script><br /><script type="text/javascript" src=""></script>
Add these to your .css file:
<br /> .sparkling{ position:relative;}<br /> .particle{ position:absolute;z-index:10;top:0px;left:0px;}
For every div,img,element,etc that you want to "sparkle" when you move your mouse over it add the class="sparkling".

You can customize anything from the sparks' image files to the life-span of the particles by editing the particles.js file. I recommend you download all the needed files to your website (sparks' images & jQuery file) so you can easily edit them.

Any quetions or suggestions should be posted in the comment section below. :)


  1. You're welcome.

    I've done this post when I first started learning jQuery and was one of the first things I've done.

    Make sure to take a look through 'jQuery' tagged posts. I'll also post a "kiss-like" feedback form soon :)

  2. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai