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.

particleground

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.

See a demo

Download

View on Github

9 thoughts on “Particleground: a jQuery plugin for background particle systems

  1. ewen says:

    Looks beautiful! Really nice work. I’ve always wanted to play with these on my sites, thankyou very much :)

  2. Louis says:

    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!

  3. lollipopper says:

    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

  4. Jonathan says:

    @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.

  5. Madhu says:

    Amaze!
    Thanks JONATHAN NICOL for creating and sharing this plugin.

  6. How to change particles to use fa-icons ?

  7. Kalle says:

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

  8. Anonymous Tumblr User says:

    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)

  9. Gaspar Argüello says:

    nice work!

Comments are closed.