您的位置：首页 > Web前端 > JavaScript

particles.js中文开发手册

2017-06-17 09:16 459 查看
2017年6月17日01:06:28

因为自己需要做产品，所以一个好的UI界面也是很重要的，发现这种散射的原子颗粒特效还不错，就弄了一个

官方github：https://github.com/VincentGarreau/particles.js/

demo制作器，注意可能需要FQ
https://codepen.io/VincentGarreau/pen/pnlso这个可以把你制作的demo导出
http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果

使用方法

加载particle.js并配置粒子：

index.html

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

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


app.js

/*particlesJS.load(@dom-id,@path-json,@callback(optional));*/
particlesJS.load('particles-js','assets/particles.json',function(){
console.log('callback-particles.jsconfigloaded');
});


particles.json就是主要的配置文件
注意一下文件顺序，不然会出现问题
实际demo


<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>particles.js</title>

<linkrel="stylesheet"href="style.css">

</head>

<body>

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

</body>
<scriptsrc='particles.min.js'></script>这个玩意需要放在下面
<scriptsrc="index.js"></script>
</html>




如有需要下载demo请到QQ群，黑色原子效果很科幻，还不错

根据css颜色和json配置文件，就打造属于自己的科幻效果



参数
键值参数选项/说明实例
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)
arrayselection(HEX)
random(string)

原子的颜色

"#b61924"

{r:182,g:25,b:36}

{h:356,s:76,l:41}

["#b61924","#333333","999999"]

"random"
particles.shape.type
string
arrayselection原子的形状
"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
pathlink
svg/png/gif/jpg原子的图片可以使用自定义图片
"assets/img/yop.svg"

"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width
number
(foraspectratio)图片宽度
100
particles.shape.image.height
number
(foraspectratio)图片高度
100
particles.opacity.value
number(0to1)不透明度
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(0to1)渐变动画不透明度
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(0to1)连接线不透明度
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
(outofcanvas)是否移动出画布
"out"

"bounce"
particles.move.bounce
boolean
(betweenparticles)是否跳动移动
true
/
false
particles.move.attract.enable
boolean原子之间吸引
true
/
false
particles.move.attract.rotateX
number原子之间吸引X水平距离
3000
particles.move.attract.rotateY
numbery垂直距离
1500
interactivity.detect_on
string原子之间互动检测
"canvas","window"
interactivity.events.onhover.enable
boolean悬停
true
/
false
interactivity.events.onhover.mode
string
arrayselection

悬停模式

"grab"
抓取临近的
"bubble"
泡沫球效果
"repulse"
击退效果
["grab","bubble"]
interactivity.events.onclick.enable
boolean点击效果
true
/
false
interactivity.events.onclick.mode
string
arrayselection

点击效果模式

"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(0to1)原子互动抓取距离连线不透明度
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

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航