BVAmbient
BVAmbient copied to clipboard
Published
20 hours ago •
BMSVieira
BMSVieira
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"
}
}
]
});
});
BMSVieira