Custom, Responsive Particle Background in JavaScript | BVAmbient

How to make use of it:

1. Import the BVAmbient’s JavaScript and Stylesheet into the doc.

<link rel="stylesheet" href="css/bvambient.css" />
<script src="js/bvambient.js"></script>

2. Apply the particle’s background to a container.

new BVAmbient({
    selector: "#myContainer"
});

3. Customize the particles with the next choices.

new BVAmbient({

    // CSS selector
    selector: "#myContainer",

    // FPS
    fps: 60,

    // number of particles
    particle_number: 50,

    // min/max size
    particle_maxwidth: 30,
    particle_minwidth: 10,

    // border radius
    particle_radius: 50,

    // apply random opacity to particles
    particle_opacity: true,

    // change particle size when colliding with boundary
    particle_colision_change: true,

    // background color
    // Hex or Rgba or random
    particle_background: "#58c70c",

    // add trail to particles
    particle_trail: {
      trail: false,
      opacity: "0.1",
      background: "#58c70c",
      length: 300
    }
    
});

4. Or makes use of a picture as particles.

new BVAmbient({

    // CSS selector
    selector: "#myContainer",

    particle_image: {
      image: true,
      src: "/path/to/particle.png"
    },

});

5. Set different options according to the screen size.

new BVAmbient({

    // CSS selector
    selector: "#myContainer",

    responsive: [
      {
        breakpoint: 1024,
        settings: {
          // options here
        }
      },
      {
        breakpoint: 768,
        settings: {
          // options here
        }
      },
      {
        breakpoint: 480,
        settings: {
          // options here
        }
      }
    ]

});

6. API strategies.

// change background color
instance.Change({
  type: "particle_background",
  value: "#223344"
});

// refresh
instance.Refresh();

// destroy
demo1.Destroy();

Customized & Responsive Particles Background, BVAmbient Plugin/Github

See Demo And Download