Particles.js基于Canvas画布创建粒子原子颗粒效果

画布创建粒子原子颗粒效果"/>

Particles.js基于Canvas画布创建粒子原子颗粒效果

Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件，可以设置粒子的形状、旋转、分布、颜色等属性，还可以动态添加粒子，效果非常炫酷，能和鼠标互动吸附或者是躲避鼠标指针。

使用方法

1、该粒子动画库插件使用方法非常简单，首先要在页面中引入particles.js文件。

<script src="js/particles.js"></script>

2、在页面中使用一个div来作为放置粒子的容器。

<div id="particles-js"></div>

3、通过particlesJS.load()方法加载配置文件

particlesJS.load('particles-js', 'assets/particles.json', function() {console.log('callback - particles.js config loaded');
});

4、编写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
}

自定义参数

相关链接

• npm包管理器地址：.js
• Github地址：.js
• CDN加速：!particles.js
• 问说网CDN加速：.js/