|
Particles.js是一款基于HTML5 Canvas畫布的輕量級(jí)粒子動(dòng)畫插件，可以設(shè)置粒子的形狀、旋轉(zhuǎn)、分布、顏色等屬性，還可以動(dòng)態(tài)添加粒子，效果非常炫酷，能和鼠標(biāo)互動(dòng)吸附或者是躲避鼠標(biāo)指針。 使用方法1、該粒子動(dòng)畫庫(kù)插件使用方法非常簡(jiǎn)單，首先要在頁(yè)面中引入particles.js文件。 <script src='js/particles.js'></script>
2、在頁(yè)面中使用一個(gè)div來(lái)作為放置粒子的容器。 <div id='particles-js'></div>
3、通過(guò)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
}
自定義參數(shù)
|
|
|
來(lái)自： Levy_X > 《WEB前端網(wǎng)站》
