Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BMSVieira/BVAmbient
BVAmbient - Vanilla Javascript Background Particles
https://github.com/BMSVieira/BVAmbient
frontend javascript particles vanillajs webdesign
Last synced: 5 days ago
JSON representation
BVAmbient - Vanilla Javascript Background Particles
- Host: GitHub
- URL: https://github.com/BMSVieira/BVAmbient
- Owner: BMSVieira
- License: mit
- Created: 2020-11-28T22:35:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-03T00:10:04.000Z (almost 4 years ago)
- Last Synced: 2024-11-01T04:42:25.418Z (8 days ago)
- Topics: frontend, javascript, particles, vanillajs, webdesign
- Language: JavaScript
- Homepage:
- Size: 970 KB
- Stars: 23
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - BMSVieira/BVAmbient - BVAmbient - Vanilla Javascript Background Particles (javascript)
README
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.
```javascript
```
2 - Include Styles.
```javascript
```
4 - Set HTML.
```javascript
```
3 - Initilize.
```javascript
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 |
```javascript
demo1.Add(5);
```
Refresh:
Removes all current elements and builds a new Ambient
```javascript
demo1.Refresh();
```
Destroy:
Removes all particles and unbind its events
```javascript
demo1.Destroy();
```
Change:
Applies changes to current particles
| Name | Value | Description |
| --- | --- | --- |
| `type` | `particle_background` | Parameter |
| `value` | `string` | Value to apply |
```javascript
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:
```javascript
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"
}
}
]
});
});
```