Sunday, January 2, 2011

[JQ] Sparks particle system

3 comments

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


DEMO:
Hover the mouse over the picture above.
NOTE:
I noticed that it works best in Google Chrome... In older versions of IE and firefox it seems to run a little slow.
HOW TO USE:
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="http://piataterenuri.info/t4d/particles/scripts/t4d-particles.js" type="text/javascript"></script><br /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></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".

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

3 comments:

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

    ReplyDelete
  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

    ReplyDelete