particlesJS使用简介

particles.opacity.value： 粒子的透明度

particles.size.anim.enable： 是否启用粒子速度（true/false）

particles.size.anim.speed： 粒子动画频率

particles.size.anim.sync： 粒子运行速度与动画是否同步

particles.move.speed： 粒子移动速度

大家可以根据这些配置文件，配置自己喜欢的背景出来，下面提供两份完整配置文件 app.js。

配置文件一（经典背景）：

{

“particles”: {

“number”: {

“value”: 80,

“density”: {

“enable”: true,

“value_area”: 800

}

},

“color”: {

“value”: “#ffffff”

},

“shape”: {

“type”: “polygon”,

“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”: false

}

配置文件二（星空背景）：

{

“particles”: {

“number”: {

“value”: 160,

“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”: 1,

“random”: true,

“anim”: {

“enable”: true,

“speed”: 1,

“opacity_min”: 0,

“sync”: false

}

},

“size”: {

“value”: 3,

“random”: true,

“anim”: {

“enable”: false,

“speed”: 4,

“size_min”: 0.3,

“sync”: false

}

},

“line_linked”: {

“enable”: false,

“distance”: 150,

“color”: “#ffffff”,

“opacity”: 0.4,

“width”: 1

},

“move”: {

“enable”: true,

“speed”: 1,

“direction”: “none”,

“random”: true,

“straight”: false,

“out_mode”: “out”,

“bounce”: false,

“attract”: {

“enable”: false,

“rotateX”: 600,

“rotateY”: 600

}

}

},

“interactivity”: {

“detect_on”: “canvas”,

“events”: {

“onhover”: {

“enable”: true,

“mode”: “bubble”

},

“onclick”: {

“enable”: true,

“mode”: “repulse”

},

“resize”: true

},

“modes”: {

“grab”: {

“distance”: 400,

“line_linked”: {

“opacity”: 1

}

},

“bubble”: {

“distance”: 250,

“size”: 0,

“duration”: 2,

“opacity”: 0,

“speed”: 3

},

“repulse”: {

“distance”: 400,

“duration”: 0.4

},

“push”: {

“particles_nb”: 4

},

“remove”: {

“particles_nb”: 2

}

}

},

“retina_detect”: true

}

---