如何用Particles.js实现自己的粒子效果背景图,以及相关配置参数详解
2017-12-07| 程成| 2467| 2| jQuery/JS

下面介绍如果用particlesjs实现自己的粒子效果图,以及相关配置参数的解释。(我博客首页就是基于particlesjs实现的)


image.png



一、使用方法


index.html页面:


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



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
}


通过以上配置,就可以实现效果粒子图了。你也可以修改配置文件,构造自己的粒子效果。





二、参数



键值参数选项/ 说明实例
particles.number.value

numbe

r数量

40
particles.number.density.enableboolean   true / false
particles.number.density.value_area

numbe

r区域散布密度大小

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.shape.typestring 

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.srcpath link 

svg / png / gif / jpg  

原子的图片可以使用自定义图片

"assets/img/yop.svg" 
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber 

(for aspect ratio)    

图片宽度

100
particles.shape.image.heightnumber 

(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.syncbooleantrue / false
particles.size.valuenumber       原子大小20
particles.size.randomboolean       原子大小随机true / false
particles.size.anim.enable

boolean    

原子渐变

true / false
particles.size.anim.speed

number    

原子渐变速度

3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue / 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_modestring  

(out of canvas)       

是否移动出画布

"out" 
"bounce"
particles.move.bounceboolean 

(between particles)   

是否跳动移动

true / false
particles.move.attract.enable

boolean          原子之间吸引

true / false
particles.move.attract.rotateX

number  

原子之间吸引X水平距离

3000
particles.move.attract.rotateY

number  y

垂直距离

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.resizeboolean         互动事件调整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.distancenumber       原子抓取泡沫效果之间的距离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_nbnumber4
retina_detectbooleantrue / false



以上包含了particlesjs的使用,particlesjs的参数解释,particlesjs的中文使用手册。你就可以构造自己的粒子效果图。




×
作者:程成
QQ:492245711