Press "Enter" to skip to content

Custom, Responsive Particle Background in JavaScript | BVAmbient

BVAmbient is a JavaScript library for creating animated, custom, and floating particles in the background of your container. Highly customizable and responsive and you can pass options to the particle background for each stop that you provide.

particles js background, how to use particles js as background, particles js examples, particles js alternative, particle js documentation, particles js cdn

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

Official Website(BMSVieira): Click Here

This superior jQuery/javascript plugin is developed by BMSVieira. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.