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:

• 10 Best Particle Systems/Effects In JavaScript

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.

$("body").buoyant({
  imgSrc: 'particle.png'
});

// or
$("body").buoyant({
  elementClass: 'myShape'
});

.myShape {
  /* CSS shape here */
}

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

$("body").buoyant({
  minRadius: 10,
  maxRadius: 40
});

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

$("body").buoyant({
  minSpeed: 20,
  maxSpeed: 70
});

5. Set the number of particles to generate.

$("body").buoyant({
  numberOfItems: 4
});

6. Full configuration options with default values.

$("body").buoyant({
  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
});

Changelog:

2022-04-15

• Update

---

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