particles background buoyant - Free Download Create A Particles Background With jQuery - Buoyant

Free Download Create A Particles Background With jQuery – Buoyant

Posted on

This time I will share jQuery Plugin and tutorial about Create A Particles Background With jQuery – Buoyant, hope it will help you in programming stack.

particles background buoyant - Free Download Create A Particles Background With jQuery - Buoyant
File Size: 42.5 KB
Views Total: 1615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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

1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <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.

1 $("body").buoyant({
2   imgSrc: 'particle.png'
3 });
4  
5 // or
6 $("body").buoyant({
7   elementClass: 'myShape'
8 });
1 .myShape {
2   /* CSS shape here */
3 }

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

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

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

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

5. Set the number of particles to generate.

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

6. Full configuration options with default values.

01 $("body").buoyant({
02   containerClass: "buoyant-container",
03   parentClass: 'buoyant-parent',
04   elementClass: '',
05   imgSrc: '',
06   width: 50,
07   height: -1,
08   backgroundColor: "black",
09   fps: 60,
10   numberOfItems: 4,
11   minRadius: 10,
12   maxRadius: 40,
13   minSpeed: 20,
14   maxSpeed: 70,
15   collisionEfficiency: 1,
16   gravity: 0,
17   trails: false,
18   colliding: false
19 });

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

source : jquery.net