Author: | BMSVieira |
---|---|
Views Total: | 993 views |
Official Page: | Go to website |
Last Update: | December 11, 2020 |
License: | MIT |
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:
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();