How to add particle effects in WordPress Website

Written by admin

On February 29, 2020

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,

You May Also Like…

How to Update wordpress php  version

How to Update wordpress php version

If you are looking to update WordPress PHP version then you come on the right place in this talk we will discuss why we need to Update PHP version of your website if you are not running the latest version of PHP may increase your site load time and the research shows...

How to add Divi inline buttons (Side By Side Button)

How to add Divi inline buttons (Side By Side Button)

Creating a beautiful website is not enough for your business. You must increase your website authority for better ranking. Google has provided a complete list of how you can increase your website authority. One of the most important points is interlinking. Buttons are...

How to create beautiful Carousel in wordpress

How to create beautiful Carousel in wordpress

Do you want your website more engaging and visually appealing for your website visitors? If your website is appealing that you offer on your website may lose your lot of business so the question is how we can make our website more attractive and visually appealing. I...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *