nickfmc/BVAmbient

BVAmbient - Vanilla Javascript Background Particles

BVAmbient - Vanilla Javascript Background Particles

Easy-to-use Particle Background built with VanillaJS

About:

There are many good particle libraries out there, however, it's hard to find one that doesn't use canvas or jquery ... so the challenge was to create high-performance, fully customizable background particles without using either, even though you know that will have its own limitations.

Features:

• 🔧 Fully Customizable
• 💪 No Dependencies, built with VanillaJS
• 🌎 Tested in All Modern Browsers
• 😎 Image Support
• 💻 Responsive
• 📈 HTML Elements (not canvas)

Demo:

https://bmsvieira.github.io/BVAmbient/

Installation:

1 - Include JavaScript Source.

<script src="path/to/bvambient.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="path/to/bvambient.css">

4 - Set HTML.

 <div id="ambient"></div>

3 - Initilize.

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new BVAmbient({
            selector: "#ambient",
            fps: 60,
            max_transition_speed: 12000,
            min_transition_speed: 8000,
            particle_number: 30,
            particle_maxwidth: 30,
            particle_minwidth: 10,
            particle_radius: 50,
            particle_opacity: true,
            particle_colision_change: true,
            particle_background: "#58c70c"
      });
});

Methods:

Add: Add new particles

Value	Description
Integer	Number of particles to add

demo1.Add(5);

Refresh: Removes all current elements and builds a new Ambient

demo1.Refresh();

Destroy: Removes all particles and unbind its events

demo1.Destroy();

Change: Applies changes to current particles

Name	Value	Description
type	particle_background	Parameter
value	string	Value to apply

demo1.Change({
    type: "particle_background",
    value: "#1e81d9"
});

Settings:

Option	Type	Default	Description
selector	String	---	Specify ID of the element
fps	Integer	60	Frames per second
max_transition_speed	Integer	12000	Max transition speed (ms)
min_transition_speed	Integer	8000	Min transition speed (ms)
particle_number	Integer	50	Number of particles
particle_maxwidth	Integer	30	Particle's max width (px)
particle_minwidth	Integer	10	Particle's min width (px)
particle_radius	Integer	50	Particle's border radius (px)
particle_opacity	Boolean	true	Apply random opacity between 0.2 and 1 to particles
particle_colision_change	Boolean	true	Particle changes size when collides with main div's boundary
particle_background	string	#58c70c or random	Hex or Rgba, random generates a random color when loading or colliding
particle_image	Object	false	Add image to particles
responsive	Object	default width	Different settings according to viewport width to improve performance
refresh_onfocus	Boolean	true	Refresh ambient when user changes tab

Full Example:

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new BVAmbient({
        selector: "#ambient",
        fps: 60,
        max_transition_speed: 12000, // speed will be randomized between max and min
        min_transition_speed: 8000,
        particle_number: 30,
        particle_maxwidth: 30,
        particle_minwidth: 10,
        particle_radius: 50,
        particle_opacity: true,
        particle_colision_change: true,
        particle_background: "#58c70c",
        refresh_onfocus: true,
        particle_image: {
          image: false,
          src: ""
        },
        responsive: [
            {
              breakpoint: 768,
              settings: {
                particle_number: "15"
              }
            },
            {
              breakpoint: 480,
              settings: {
                particle_number: "10"
              }
            }
        ]
      });
});