Wednesday, October 17, 2012

[JQ] Javascript particles system v2

3 comments

Good news. I have created a brand new version of the old's particle system! Now, easier to implement, customizable and there's much more physics involved!


-> Click here to see the demo page <-

Basic usage:

-> Include jQuery and particles system's files.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://files.tips4design.com/particles/t4d.particles.v2.min.js" type="text/javascript"></script> 
-> Add the class "sparkling" for any HTML element you want.
Demo text  
Hover over: Demo text

Advanced usage:

You can also specify the following attributes
  • data-src="particle_image" -> a link/path to a set of particles images. Note that "1.png" , "2.png", etc. will be added at the end of this url
  • data-src-no="5" -> related to the above, how many different particle types does the set have.
  • data-style="style_name" -> a specific style defined in the javascript file that alters how the particles behave (speed, acceleration, birth-rate, etc...)

Improvements:

  • Use this awesome script simply by including one file and adding the class sparkling 
  • Fully customizable. No more obfuscation. The code is even commented! You can create custom styles and use your own particle images.
  • Particles do not intereact with the page or with the user. The particles are deleted if they exit viewport. The user can click through the particles so they do not affect UI.
  • Particles are acceleration sensitive: move the mouse faster, the particles go faster!
  • Cross-browser. Works even in IE8 (almost :-" )
Click for Github link of the project. :). Remember that that you can see the examples on the demo page: http://files.tips4design.com/particles/ If any of you guys creates a style that looks good (or creates some new particle images) you can post it in the comment section below and it will be added to the particles system's file.

3 comments:

  1. The demo page is pretty nice. You should post some more info on how to create custom styles.

    ReplyDelete
  2. Can this be attached to objects other than the mouse?

    ReplyDelete
    Replies
    1. At the moment the mouse is what triggers the particles, but if you know some javascript you can easily change that. (eg: make a stream of particles constantly come from a source).

      Delete