Create A Particles Background With jQuery - Buoyant

File Size: 11.4 KB
Views Total: 4933
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create A Particles Background With jQuery  - Buoyant

Buoyant is a tiny (2kb minified) jQuery plugin to create animated particles from any CSS shapes or images that move randomly across the background of your webpage when activated.

See Also:

How to use it:

1. Load the minified version of the Buoyant plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.buoyant.min.js"></script>

2. Attach the plugin to the target element and define the image or CSS shape for the particles.

  imgSrc: 'particle.png'

// or
  elementClass: 'myShape'
.myShape {
  /* CSS shape here */

3. Set the min/max size of the particles.

  minRadius: 10,
  maxRadius: 40

4. Set the min/max animation speed of the particles.

  minSpeed: 20,
  maxSpeed: 70

5. Set the number of particles to generate.

  numberOfItems: 4

6. Full configuration options with default values.

  containerClass: "buoyant-container",
  parentClass: 'buoyant-parent',
  elementClass: '',
  imgSrc: '',
  width: 50,
  height: -1,
  backgroundColor: "black",
  fps: 60,
  numberOfItems: 4,
  minRadius: 10,
  maxRadius: 40,
  minSpeed: 20,
  maxSpeed: 70,
  collisionEfficiency: 1,
  gravity: 0,
  trails: false,
  colliding: false



This awesome jQuery plugin is developed by hamayunaziz. For more Advanced Usages, please check the demo page or visit the official website.