Particleground: a jQuery plugin for background particle systems
Lately I’ve noticed a few sites using JavaScript particle systems as animated backgrounds. I was curious about the technique so I created Particleground, a jQuery plugin that creates a similar effect.
The particle system can be fine tuned using several configuration options, including a parallax effect which is controlled by the mouse on desktop computers or the gyroscope on smart devices. Particleground works in any browser that supports HTML5 canvas.
9 thoughts on “Particleground: a jQuery plugin for background particle systems”
Comments are closed.
Looks beautiful! Really nice work. I’ve always wanted to play with these on my sites, thankyou very much :)
Really really nice plugin, I love it !
I’m trying to animate the Particle background with a smooth color transitions but I haven’t succeed so far.
Anyway, thanks a lot for what you have done here!
hi jonathan, i like your plugin. i would like to place it under a div of existing content – is there a way to do that without absolute positioning (like your demo)?
basically – can the particleground div be “stacked” some vertically in the z axis?
also – what license does this have?
cheers
@lollipopper You could control the z-index of your element using the same CSS styles you would normally use – it is not different than any other element. In most cases that’s going to mean absolute positioning.
The license is in jquery.particleground.js – it is an MIT license.
Amaze!
Thanks JONATHAN NICOL for creating and sharing this plugin.
How to change particles to use fa-icons ?
Hey there :-)
* laughing at the noob is 100% ok! :-)
..and yes, as a total rookie, can you perhaps help me integrating this into my wordpress site?
I could totally use this as a background for an image or a container!
Thanks a zillion in advance! :-)
Hello there Jonathan, i’m a tumblr user and i stumbled upon this blog that posted themes and codes. He posted a tutorial of a particle background and i tried it on my blog, there were some problems so i decided to search the net for help. i came across your work and realized that this tumblr user may have reproduced your work and claimed it as their own. Check their blog out, you’ll find a hover tab on the left. Click on the tutorials and you’ll see the particle background. (http://neutral.tumblr.com)
nice work!