particles.js is a lightweight (~2kb) and dependency-free javascript plugin for particle backgrounds.
There are several ways to install particles.js:
- Download the latest version
- Install with npm:
npm install particlesjs --save
- Use the CDN:
https://npmcdn.com/[email protected]/dist/particles.min.js
Include the minified JS in your HTML file.
<script src="path/to/particles.min.js"></script>
Create a canvas element in your body tag.
<canvas id="myCanvas"></canvas>
Add a few styles to your css.
html,
body {
margin: 0;
}
#myCanvas {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
Initialize the plugin on the window.onload
event.
window.onload = function() {
Particles.init({ options });
};
// e.g.
window.onload = function() {
Particles.init({
selector: '#myCanvas',
color: '#0f9976'
});
};
Option | Default | Description |
---|---|---|
selector |
- | Required: The CSS selector of your canvas element |
maxParticles |
100 |
Optional: Maximum amount of particles |
sizeVariations |
3 |
Optional: Amount of size variations |
speed |
0.5 |
Optional: Movement speed of the particles |
color |
#000000 |
Optional: Color of particles and connecting lines |
minDistance |
120 |
Optional: Distance in px for conntecting lines |
connectParticles |
false |
Optional: true /false if connecting lines should be drawn |
IE9+ and all modern browsers.
To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:
- Clone the repository:
https://github.com/marcbruederlin/particles.js.git
- Change in the project directory:
cd particles.js
- Install the dependencies:
npm install
- Run the gulp build task
gulp build
to regenerate thedist
folder.
You can also rungulp build --watch
to watch for file changes and automatically rebuild the files.
If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you shoot me a link to it.
For any problems or questions don't hesitate to open an issue.
Do you like particles.js? If you want, you can buy me a coffee.
particles.js is created by Marc Brüderlin and released under the MIT license.