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 :-" )
The demo page is pretty nice. You should post some more info on how to create custom styles.
ReplyDeleteCan this be attached to objects other than the mouse?
ReplyDeleteAt 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