这次给大家带来ParticlesJS的使用详解,ParticlesJS使用的注意事项有哪些,下面就是实战案例,一起来看一下。
particles.js
A lightweight JavaScript library for creating particles.
一个轻量级的创建粒子背景的 JavaScript 库
那么,下面将介绍如何使用 particles.js 。
particlesJS 开源在Github上:https://github.com/VincentGarreau/particles.js
这个项目中有提供demo,可以直接下载这个项目,打开demo里面的index.html文件,即可看到效果。
那么,如果我们要构建自己的项目,该如何引入文件呢?
建议如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<title>particles.js</title>
<meta name= "description" content= "particles.js is a lightweight JavaScript library for creating particles." >
<meta name= "author" content= "Vincent Garreau" />
<meta name= "viewport" content= "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<link rel= "stylesheet" media= "screen" href= "css/style.css" rel= "external nofollow" >
</head>
<body>
<p id= "particles-js" ></p>
<!-- scripts -->
<script src= "js/particles.js" ></script>
<script src= "js/app.js" ></script>
</body>
</html>
|
登录后复制
particles.js 是它的库,我们肯定是要引入的,app.js 是参数配置文件,我们也要引入,而 demo 中的 stats.js 就没有必要引入了。
style.css 我们也可以引入,背景颜色是在css中设置的。
基于这个模板,我们可以在上面添加我们想要实现的功能,比如说注册登录功能,需要注意的是:
用 p 来封装我们要实现的功能代码块,并且在 css 中为这个 p 设置绝对定位。
下面介绍参数配置文件 app.js 文件的使用:
particles.number.value : 粒子的数量
particles.number.density : 粒子的稀密程度
particles.number.density.enable : 启用粒子的稀密程度 (true 或 false)
particles.number.density.value_area : 每一个粒子占据的空间(启用粒子密度,才可用)
particles.color.value : 粒子的颜色 (支持16进制”#b61924”,rgb”{r:182, g:25, b:36}”,hsl,以及random)
particles.shape.type: 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)
particles.opacity.value: 粒子的透明度
particles.size.anim.enable: 是否启用粒子速度(true/false)
particles.size.anim.speed: 粒子动画频率
particles.size.anim.sync: 粒子运行速度与动画是否同步
particles.move.speed: 粒子移动速度
大家可以根据这些配置文件,配置自己喜欢的背景出来,下面提供两份完整配置文件 app.js。
配置文件一(经典背景):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | {
"particles" : {
"number" : {
"value" : 80,
"density" : {
"enable" : true,
"value_area" : 800
}
},
"color" : {
"value" : "#ffffff"
},
"shape" : {
"type" : "polygon" ,
"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" : 3,
"random" : true,
"anim" : {
"enable" : false,
"speed" : 40,
"size_min" : 0.1,
"sync" : false
}
},
"line_linked" : {
"enable" : true,
"distance" : 150,
"color" : "#ffffff" ,
"opacity" : 0.4,
"width" : 1
},
"move" : {
"enable" : true,
"speed" : 6,
"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" : true,
"mode" : "repulse"
},
"onclick" : {
"enable" : true,
"mode" : "push"
},
"resize" : true
},
"modes" : {
"grab" : {
"distance" : 400,
"line_linked" : {
"opacity" : 1
}
},
"bubble" : {
"distance" : 400,
"size" : 40,
"duration" : 2,
"opacity" : 8,
"speed" : 3
},
"repulse" : {
"distance" : 200,
"duration" : 0.4
},
"push" : {
"particles_nb" : 4
},
"remove" : {
"particles_nb" : 2
}
}
},
"retina_detect" : false
}
|
登录后复制
配置文件二(星空背景):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | {
"particles" : {
"number" : {
"value" : 160,
"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" : 1,
"random" : true,
"anim" : {
"enable" : true,
"speed" : 1,
"opacity_min" : 0,
"sync" : false
}
},
"size" : {
"value" : 3,
"random" : true,
"anim" : {
"enable" : false,
"speed" : 4,
"size_min" : 0.3,
"sync" : false
}
},
"line_linked" : {
"enable" : false,
"distance" : 150,
"color" : "#ffffff" ,
"opacity" : 0.4,
"width" : 1
},
"move" : {
"enable" : true,
"speed" : 1,
"direction" : "none" ,
"random" : true,
"straight" : false,
"out_mode" : "out" ,
"bounce" : false,
"attract" : {
"enable" : false,
"rotateX" : 600,
"rotateY" : 600
}
}
},
"interactivity" : {
"detect_on" : "canvas" ,
"events" : {
"onhover" : {
"enable" : true,
"mode" : "bubble"
},
"onclick" : {
"enable" : true,
"mode" : "repulse"
},
"resize" : true
},
"modes" : {
"grab" : {
"distance" : 400,
"line_linked" : {
"opacity" : 1
}
},
"bubble" : {
"distance" : 250,
"size" : 0,
"duration" : 2,
"opacity" : 0,
"speed" : 3
},
"repulse" : {
"distance" : 400,
"duration" : 0.4
},
"push" : {
"particles_nb" : 4
},
"remove" : {
"particles_nb" : 2
}
}
},
"retina_detect" : true
}
|
登录后复制
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是ParticlesJS的使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!