js文件下载地址
页面引入js
<script src="js/particles.js"></script>
在页面中使用一个div来作为放置粒子的容器
<div id="particles"></div>
容器style设置
#particles {position: absolute;top: 0;width: 100%;z-index: -1;background-color: #eee;overflow: hidden;clear: both;height: 100%;}
Particlesjs应用脚本
$(function () {particlesJS("particles", {"particles": {"number": {"value": 30,"density": {"enable": true,"value_area": 800}},"color": {"value": "#ff6f00"},"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": "#ff6f00","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});});
查看效果链接
想看效果点击这里
