|
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
}
自定义参数
| key | option type / notes | example |
|---|
particles.number.value |
number |
40 |
particles.number.density.enable |
boolean |
true / false |
particles.number.density.value_area |
number |
800 |
particles.color.value |
HEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string) |
'#b61924'
{r:182, g:25, b:36}
{h:356, s:76, l:41}
['#b61924', '#333333', '999999']
'random' |
particles.number.density.value_area |
number |
800 |
particles.shape.type |
string
array selection |
'circle'
'edge'
'triangle'
'polygon'
'star'
'image'
['circle', 'triangle', 'image'] |
particles.shape.stroke.width |
number |
2 |
particles.shape.stroke.color |
HEX (string) |
'#222222' |
particles.shape.polygon.nb_slides |
number |
5 |
particles.shape.image.src |
path link
svg / png / gif / jpg |
'assets/img/yop.svg'
'http:///assets/img/yop.png' |
particles.shape.image.width |
number
(for aspect ratio) |
100 |
particles.shape.image.height |
number
(for aspect ratio) |
100 |
particles.opacity.value |
number (0 to 1) |
0.75 |
particles.opacity.random |
boolean |
true / false |
particles.opacity.anim.enable |
boolean |
true / false |
particles.opacity.anim.speed |
number |
3 |
particles.opacity.anim.opacity_min |
number (0 to 1) |
0.25 |
particles.opacity.anim.sync |
boolean |
true / false |
particles.size.value |
number |
20 |
particles.size.random |
boolean |
true / false |
particles.size.anim.enable |
boolean |
true / false |
particles.size.anim.speed |
number |
3 |
particles.size.anim.size_min |
number |
0.25 |
particles.size.anim.sync |
boolean |
true / false |
particles.line_linked.enable |
boolean |
true / false |
particles.line_linked.distance |
number |
150 |
particles.line_linked.color |
HEX (string) |
#ffffff |
particles.line_linked.opacity |
number (0 to 1) |
0.5 |
particles.line_linked.width |
number |
1.5 |
particles.move.enable |
boolean |
true / false |
particles.move.speed |
number |
4 |
particles.move.direction |
string |
'none'
'top'
'top-right'
'right'
'bottom-right'
'bottom'
'bottom-left'
'left'
'top-left' |
particles.move.random |
boolean |
true / false |
particles.move.straight |
boolean |
true / false |
particles.move.out_mode |
string
(out of canvas) |
'out'
'bounce' |
particles.move.bounce |
boolean
(between particles) |
true / false |
particles.move.attract.enable |
boolean |
true / false |
particles.move.attract.rotateX |
number |
3000 |
particles.move.attract.rotateY |
number |
1500 |
interactivity.detect_on |
string |
'canvas', 'window' |
interactivity.events.onhover.enable |
boolean |
true / false |
interactivity.events.onhover.mode |
string
array selection |
'grab'
'bubble'
'repulse'
['grab', 'bubble'] |
interactivity.events.onclick.enable |
boolean |
true / false |
interactivity.events.onclick.mode |
string
array selection |
'push'
'remove'
'bubble'
'repulse'
['push', 'repulse'] |
interactivity.events.resize |
boolean |
true / false |
interactivity.events.modes.grab.distance |
number |
100 |
interactivity.events.modes.grab.line_linked.opacity |
number (0 to 1) |
0.75 |
interactivity.events.modes.bubble.distance |
number |
100 |
interactivity.events.modes.bubble.size |
number |
40 |
interactivity.events.modes.bubble.duration |
number
(second) |
0.4 |
interactivity.events.modes.repulse.distance |
number |
200 |
interactivity.events.modes.repulse.duration |
number
(second) |
1.2 |
interactivity.events.modes.push.particles_nb |
number |
4 |
interactivity.events.modes.push.particles_nb |
number |
4 |
retina_detect |
boolean |
true / false |
|
