Particles.js implements particle dynamic background animation

This time I will bring you Particles.js to implement particle dynamic background animation. What are the precautions for Particles.js to implement particle dynamic background animation. The following is a practical case, let’s take a look.

Operation process:

There is a basic process on the Internet, you can refer to it, but if it is used directly on the login page, there will be small bugs and need to be adjusted.

1. First introduce the particles.js file into the page.

<script src="js/particles.js"></script>

2. Use a p in the page as a container to place particles. [Generally placed at the bottom, the css needs to be improved]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3. Load Configuration file: It is said on the Internet that using the load() method also requires a configuration json file, and the light path will make me crippled.

                                                                                Refer to the official demo http://codepen.io/VincentGarreau/pen/pnlso

                                                                                                                                                                                                                                        being made to write the configuration directly in js

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "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": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "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": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4. Configure parameter option and use: option github official website page has details. Control the number of particles, their movement speed, etc.

There are still some problems in using particles. After downloading the file in Chrome and then switching to this page, it becomes disabled. Wait for a solution.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of routing meta-information of Vue-router

How to use the Particles.js library in vue use

The above is the detailed content of Particles.js implements particle dynamic background animation. For more information, please follow other related articles on the PHP Chinese website!