particles-jsを使ってアニメーションを実装したい

html
1<div id="particles-js"></div> 
2
3 <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib -->
4  <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

css
1
2  
3  #particles-js {
4    width: 100%;
5    height: 100%;
6    display: block;
7    position: absolute;
8    top: 0;
9    left: 0;
10    right: 0;
11    bottom: 0;
12  }
13

js
1     particlesJS("particles-js", {
2     "particles": {
3     "number": {
4     "value": 80,
5     "density": {
6     "enable": true,
7     "value_area": 800
8     }
9     },
10     "color": {
11     "value": "#ffffff"
12     },
13     "shape": {
14     "type": "circle",
15     "stroke": {
16     "width": 0,
17     "color": "#000000"
18     },
19     "polygon": {
20     "nb_sides": 5
21     },
22     "image": {
23     "src": "img/github.svg",
24     "width": 100,
25     "height": 100
26     }
27     },
28     "opacity": {
29     "value": 0.5,
30     "random": false,
31     "anim": {
32     "enable": false,
33     "speed": 1,
34     "opacity_min": 0.1,
35     "sync": false
36     }
37     },
38     "size": {
39     "value": 3,
40     "random": true,
41     "anim": {
42     "enable": false,
43     "speed": 40,
44     "size_min": 0.1,
45     "sync": false
46     }
47     },
48     "line_linked": {
49     "enable": true,
50     "distance": 150,
51     "color": "#ffffff",
52     "opacity": 0.4,
53     "width": 1
54     },
55     "move": {
56     "enable": true,
57     "speed": 6,
58     "direction": "none",
59     "random": false,
60     "straight": false,
61     "out_mode": "out",
62     "bounce": false,
63     "attract": {
64     "enable": false,
65     "rotateX": 600,
66     "rotateY": 1200
67     }
68     }
69     },
70     "interactivity": {
71     "detect_on": "canvas",
72     "events": {
73     "onhover": {
74     "enable": true,
75     "mode": "repulse"
76     },
77     "onclick": {
78     "enable": true,
79     "mode": "push"
80     },
81     "resize": true
82     },
83     "modes": {
84     "grab": {
85     "distance": 400,
86     "line_linked": {
87     "opacity": 1
88     }
89     },
90     "bubble": {
91     "distance": 400,
92     "size": 40,
93     "duration": 2,
94     "opacity": 8,
95     "speed": 3
96     },
97     "repulse": {
98     "distance": 200,
99     "duration": 0.4
100     },
101     "push": {
102     "particles_nb": 4
103     },
104     "remove": {
105     "particles_nb": 2
106     }
107     }
108     },
109     "retina_detect": true
110     });
111     var count_particles, stats, update;
112     stats = new Stats;
113     stats.setMode(0);
114     stats.domElement.style.position = 'absolute';
115     stats.domElement.style.left = '0px';
116     stats.domElement.style.top = '0px';
117     document.body.appendChild(stats.domElement);
118     count_particles = document.querySelector('.js-count-particles');
119     update = function() {
120     stats.begin();
121     stats.end();
122     if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
123     count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
124     }
125     requestAnimationFrame(update);
126     };
127     requestAnimationFrame(update);;
128