Customized & Responsive Particles Background In JavaScript – BVAmbient

Preview:

Description:

BVAmbient is a JavaScript library for generating animated, customized, and floating particles in the background of your container.

Highly customizable and fully responsive. You can pass options to the particles background for each breakpoint you provide.

See Also:

• 5 Best Particles Animation JavaScript Libraries

How to use it:

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

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

2. Apply the particles background to a container.

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

3. Customize the particles with the following options.

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 uses an image 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 methods.

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