particles.js

A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.

Documentation

Installation

To install particles.js you can download the latest version, install it via npm:

npm install particlesjs —-save

or use the CDN:

https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js

Usage

Include the minified JS file in your HTML (right before the closing body tag):

1 <body>
2   …
3   <script src="path/to/particles.min.js"></script>
4 </body>

Add a canvas element to your markup (it should be the last element):

1 <body>
2   …
3   <canvas class="background"></canvas>
4   <script src="path/to/particles.min.js"></script>
5 </body>

Add a few styles to your css:

1 html, body {
2   margin: 0;
3   padding: 0;
4 }
5
6 .background {
7   position:  absolute;
8   display:  block;
9   top: 0;
10   left: 0;
11   z-index: 0;
12 }

And Initialize the plugin on DOM ready:

1 window.onload = function() {
2   Particles.init({
3     selector: '.background'
4   });
5 };

Options

Option Type Default Description
selector string - Required: 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
responsive array null Optional: Array of objects containing breakpoints and options

Responsive option

With the responsive option, you can add or override options for different screen sizes:

1
2 Particles.init({
3   // normal options
4   selector: '.background',
5   maxParticles: 450,
6
7   // options for breakpoints
8   responsive: [
9     {
10       breakpoint: 768,
11       options: {
12         maxParticles: 200,
13         color: '#48F2E3',
14         connectParticles: false
15       }
16     }, {
17       breakpoint: 425,
18       options: {
19         maxParticles: 100,
20         connectParticles: true
21       }
22     }, {
23       breakpoint: 320,
24       options: {
25         maxParticles: 0 // disables particles.js
26       }
27     }
28   ]
29 });
30

Methods

Method Description
pauseAnimation Pauses/stops the particle animation
resumeAnimation Continues the particle animation

Use the public methods

1
2 var particles = Particles.init({
3   // options
4 });
5
6 // E.g. gets called on a button click
7 function pause() {
8   particles.pauseAnimation();
9 }
10
11 // E.g. gets called on a button click
12 function resume() {
13   particles.resumeAnimation();
14 }

Browser support

particles.js supports all major browsers including IE9+.



Do you like particles.js?

Help keep this project evolving by donating any amount via PayPal.