Dynamic particle effects using PARTICLESJS to achieve background in web pages

The first one:

This dynamic background effect is actually very simple to make.

Using the Particles.js

Particles.js can be downloaded from the GitHub website to the latest source code, the URL is https://github.com/VincentGarreau/particles.js/

The use of the method is very simple

The first step is to introduce the script file Particles.min.js in the HTML file, which can be found in the downloaded compression package.

<src= "Particles.min.js"></script>

In the second step, put a div container in the HTML and set the ID to Particles-js. This is usually on the last side of all the page elements.

<div id= "Particles-js" ></div>
<style type= "Text/css" >
#particles-js {
Position:absolute;
top:0;
width:100%;
}
</style>

Step three, set the window style

<type= "Text/css">
#particles-js {
Z-index:-1;
Position:absolute;
top:0;
width:100%;
Background: #aaa;
}</style>

The fourth step, the script generates particle effects, can be placed in a single JS file, can also be placed in the <script> tag. In any case, this script will appear after the DIV container.

Particlesjs ("Particles-js", {  "Particles": {    "Number": {      "Value": 380,      "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": "Grab"      },      "OnClick": {        "Enable":true,        "Mode": "Push"      },      "Resize":true    },    "Modes": {      "Grab": {        "Distance": 140,        "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});

Completed.

Dynamic particle effects using PARTICLESJS to achieve background in web pages