Create Awesome Background Effects with Particles.js

Joshua Hall

By far, one of my favorite libraries for spicing up a landing page is particles.js. In a few minutes you can have a sleek and elegant sci-fi look that can completely change the overall feel of the page. You can find some amazing examples of what you can create on their official site.

Since their documentation takes more of a ‘play around and figure it out yourself’ approach, this article aims to, hopefully, give more of a structured guide into its uses and capabilities.

So let’s get started…

Installation

The obvious first step would be to install it through npm:

$ npm install particles.js

Or to just use the CDN in a script tag: https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js

If you use a local installation and get an error saying your file path 'was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)', then you may need to use the full path to the particles.js file.

Instead use "./node_modules/particles.js/particles.js"

File Setup

We only need three files to get started, the expected index.html and app.js with a particles.json file where we’ll define how we want the particles configured.

index.html

All we need in our html file is a div with an id of particles-js for the library to hook the canvas onto:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Particles</title>
</head>

<body>
  <div id="particles-js"></div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <!-- Or -->
  <script src="particles.js"></script>
</body>
</html>

app.js

All we need here is the particlesJS.load function, which takes two arguments: the element you want it to be displayed onto (#particles-js), and the name of the configuration file (particles.json).

particlesJS.load('particles-js', 'particles.json');

Default Configuration

Now that the boilerplate’s set up, we can start with the fun part. Since particles.js has it’s own defaults you don’t ‘need’ to pass anything in besides some open curly brackets.

See the Pen Particles JS Example #1 by Alligator.io (@alligatorio) on CodePen.


Not too exciting, right? Let’s jazz it up a bit.

Configuration

The particles.json has two main objects, particles for controlling the look and feel of the particles, and interactivity for handling all of the effects. We’ll start with manipulating the appearance.

particles

The best way to get comfortable with this is probably to just to work down the file and play around with everything.

Note that here I added some comments for extra information, but you'll want to remove those as JSON doesn't support comments.

particles.json

"particles": {
  "number": {
    "value": 50,
    "density": {
      "enable": true,
      "value_area": 700 // Denser the smaller the number.
    }
  },
  "color": { // The color for every node, not the connecting lines.
    "value": "#01579b" // Or use an array of colors like ["#9b0000", "#001378", "#0b521f"]
  },
  "shape": {
      "type": "circle", // Can show circle, edge (a square), triangle, polygon, star, img, or an array of multiple.
      "stroke": { // The border
        "width": 1,
        "color": "#145ea8"
      },
      "polygon": { // if the shape is a polygon
        "nb_sides": 5
      },
      "image": { // If the shape is an image
        "src": "",
        "width": 100,
        "height": 100
      }
  },
  "opacity": {
    "value": 0.7,
    "random": true
  },
  "size": {
    "value": 10,
    "random": true
  },
  "line_linked": {
    "enable": true,
    "distance": 200, // The radius before a line is added, the lower the number the more lines.
    "color": "#007ecc",
    "opacity": 0.5,
    "width": 2
  },
  "move": {
    "enable": true,
    "speed": 2,
    "direction": "top", // Move them off the canvas, either "none", "top", "right", "bottom", "left", "top-right", "bottom-right" et cetera...
    "random": true,
    "straight": false, // Whether they'll shift left and right while moving.
    "out_mode": "out", // What it'll do when it reaches the end of the canvas, either "out" or "bounce".
    "bounce": false, 
    "attract": { // Make them start to clump together while moving.
      "enable": true,
      "rotateX": 600,
      "rotateY": 1200
    }
  }
}

And here’s what we get using that configuration:

See the Pen Particles JS Example #2 by Alligator.io (@alligatorio) on CodePen.

interactivity

The events, onhover and onclick, have 5 modes, or effects, they’ll have on the particles. Each mode is activated in the events object and configured in the modes object.

  • push add more particles
  • remove delete particles (only available on the onclick mode)
  • grab connects lines from every node in a specific radius to your cursor (only available on the onhover mode)
  • bubble node in a specific range will expand and/or change opacity
  • repulse pushes all nodes away to a specific radius

Things start to really get interesting when you pass multiple modes as an array.

particles.json

"interactivity": {
  "detect_on": "canvas",
  // activate
  "events": {
      "onhover": {
        "enable": true,
        "mode": [
          "grab",
          "bubble"
        ]
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
  },
  // configure
  "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.7
        }
      },
      "bubble": {
        "distance": 600,
        "size": 12,
        "duration": 1,
        "opacity": 0.8,
        "speed": 2
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 20 // How many you want added
      },
      "remove": {
        "particles_nb": 10
      }
  }
},
"retina_detect": true // No clue what this does, docs don't explain, too scared to remove. ¯\_(ツ)_/¯
}

Here’s how it looks, I tried to go for a honeycomb-like look:

See the Pen Particles JS Example #3 by Alligator.io (@alligatorio) on CodePen.

✨ While particles.js may not have a place in your daily arsenal of frameworks and libraries, it is undoubtedly a very simple tool for quickly jazzing up any landing page with jaw-dropping effects.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#