How to add particle effects in WordPress Website

Recently I created a website for my Fiverr client, I am using Divi theme for this project and client ask me to add nice particle effects on website header, so google it and find vincentgarreau.com is an open-source library providing js code, which can allow me to add the nice particle effect on the background.

I have this on my client website Klbproduction and he really likes it, so many of my friends ask me how to add this effect in there website so I think why not create a guide for you, here are the few steps you need to follow to add these nice effects in your website section.

How to integrate the js library to your WordPress website

You can download the js library from here, and follow the guide to integrate with your theme, but the cakewp have created the nice plugin which can allow a technical person to integrate the js code very easily, here you can download the plugin.

Login into your WordPress dashboard add  new plugin and install and activate this the plugin by using the zip file you have downloaded when you have installed the plugin you can see the left sidebar

Step 2: get the js code

You can get the js code from this website. Click on the link and you can see the default particle screen,

You can play with the effect by click on the default dropdown menu,

here are the few effects you can integrate with your website

1. Nasa
2. Bubble
3. Snow
4. Nyan Cat

When you are happy with the result you can download the current config JSON file

You can also get a copy the default code here

particlesJS('webHeader101',

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

);

Now go to particle plugin you have installed and paste the code in this format

particlesJS(‘UNIQUE_ID_HERE’,
PASTE YOUR CODE HERE
);

Now go to the section you want to add this effect, click on section setting,  go to advance and click on section CSS class and id. Now give the section ID which you have to give in your JS code, save the page now the magic happens, you get the nice moving effect on your website,