Particles.js implements particle dynamic background animation-JS Tutorial-php.cn

Particles.js implements particle dynamic background animation

php中世界最好的语言

Release： 2018-04-17 11:17:29

Original

2894 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!