particlesjs
Advanced tools
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
particles.js is a lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
There are several ways to install particles.js:
npm install particlesjs --savehttps://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.jsInclude the minified JS in your HTML (right before the closing body tag).
<body>
…
<script src="path/to/particles.min.js"></script>
</body>
Add a canvas element to your markup (it should be the last element)
<body>
…
<canvas class="background"></canvas>
<script src="path/to/particles.min.js"></script>
</body>
Add a few styles to your css.
html,
body {
margin: 0;
padding: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
Initialize the plugin on the window.onload event.
window.onload = function() {
Particles.init({
selector: '.background'
});
};
| Option | Type | Default | Description |
|---|---|---|---|
selector | string | - | Required: The CSS selector of your canvas element |
maxParticles | integer | 100 | Optional: Maximum amount of particles |
sizeVariations | integer | 3 | Optional: Amount of size variations |
speed | integer | 0.5 | Optional: Movement speed of the particles |
color | string or string[] | #000000 | Optional: Color(s) of the particles and connecting lines |
minDistance | integer | 120 | Optional: Distance in px for connecting lines |
connectParticles | boolean | false | Optional: true/false if connecting lines should be drawn or not |
responsive | array | null | Optional: Array of objects containing breakpoints and options |
Example how to use the responsive option.
| Method | Description |
|---|---|
pauseAnimation | Pauses/stops the particle animation |
resumeAnimation | Continues the particle animation |
destroy | Destroys the plugin |
Example how to use the public methods.
IE9+ and all modern browsers.
See various examples how you can use particles.js.
To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:
https://github.com/marcbruederlin/particles.js.gitcd particles.jsnpm installgulp build to regenerate the dist folder. gulp 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.
particles.js is created by Marc Brüderlin and released under the MIT license.
The source code for particles.js 1.x has been moved to the v1 branch.
FAQs
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
We found that particlesjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.