特效背景粒子插件particles.js

粒子插件particles.js"/>

特效背景粒子插件particles.js

效果图如下：

 放入页面中的HTML：

<div id="particles-js"></div><script src="particles.js"></script>

CSS 可自行修改

canvas {display: block;vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;
}

Javascript代码:

<script>/* ---- particles.js config ---- */particlesJS("particles-js", {"particles": {"number": {"value":80,"density": {"enable": true,"value_area": 1000}},"color": {"value": "#A9B7B8"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000"},"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": "#A9B7B8","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
});/* ---- stats.js config ---- */

本地奔跑是可以跑起来的，官网介绍应该如下使用：

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {console.log('callback - particles.js config loaded');
});

particles.json

{"particles": {"number": {"value": 80,"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": 80,"size_min": 0.1,"sync": false}},"line_linked": {"enable": true,"distance": 300,"color": "#ffffff","opacity": 0.4,"width": 2},"move": {"enable": true,"speed": 12,"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": true,"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
}

Options:

最后附带一下官网地址：

官方github：.js/

demo制作器：

感谢一下最开始搜索到的知识共享者作者id：.html

至此，特效粒子效果完成~╰(*°▽°*)╯

转载于:.html