Home >Web Front-end >JS Tutorial >JS Library Particles.js Chinese Development Manual
Because I need to make products, a good UI interface is also very important. I found that the special effect of this kind of scattered atomic particles is not bad. Today, the editor of Script House shared the Particles.js Chinese development manual and particles.js parameters with everyone. Friends who need it can refer to it
Because I need to make products, a good UI interface is also very important. , I found that the special effect of scattering atomic particles was pretty good, so I made a
official github: https://github.com/VincentGarreau/particles.js/
demo maker, please note You may need FQ
https://codepen.io/VincentGarreau/pen/pnlso This can export the demo you made
http://vincentgarreau.com/particles.js/This can Used to try to configure different effects
Usage method
Load particle.js and configure particles:
index.html
<p id="particles-js"></p> <script src="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.js config loaded'); });particles.json is the main configuration filePay attention File order, otherwise problems will occurActual demo
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>particles.js</title> <link rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <p id="particles-js"></p> </body> <script src='particles.min.js'></script> 这个玩意需要放在下面 <script src="index.js"></script> </html>If you need to download the demo, please go to the QQ group, The black atom effect is very sci-fi, not badCreate your own sci-fi effect based on css color and json configuration file
Parameters
Key value | Parameter options/description | Example |
---|---|---|
##particles.number.value<span style="color:#111111;font-family:NSimsun"></span>
| number Quantity40<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.number.density.enable<span style="color:#111111;font-family:NSimsun"></span> | boolean
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
##particles.number.density.value_area<span style="color:#111111;font-family:NSimsun"></span> | number Area distribution density size800<span style="color:#111111;font-family:NSimsun"></span> |
|
##particles.color.value<span style="color:#111111;font-family:NSimsun"></span>
| HEX (string)
RGB (object)
HSL (object) |
<span style="color:#111111;font-family:NSimsun">"#b61924"</span> <span style="color:#111111;font-family:NSimsun">{r:182, g:25, b:36}</span> <span style="color:#111111;font-family:NSimsun">{h:356, s:76, l:41}</span> <span style="color:#111111;font-family:NSimsun">["#b61924", "#333333", "999999"]</span> <span style="color:#111111;font-family:NSimsun">"random"</span>
|
<span style="color:#111111;font-family:NSimsun">particles.shape.type</span> |
string array selection 原子的形状 |
<span style="color:#111111;font-family:NSimsun">"circle"</span> <span style="color:#111111;font-family:NSimsun">"edge"</span> <span style="color:#111111;font-family:NSimsun">"triangle"</span> <span style="color:#111111;font-family:NSimsun">"polygon"</span> <span style="color:#111111;font-family:NSimsun">"star"</span> <span style="color:#111111;font-family:NSimsun">"image"</span> <span style="color:#111111;font-family:NSimsun">["circle", "triangle", "image"]</span>
|
##particles.shape.stroke.width <span style="color:#111111;font-family:NSimsun"></span> | number The width of the principle2<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.shape.stroke.color<span style="color:#111111;font-family:NSimsun"></span>
| HEX (string) Atomic color"#222222"<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.shape.polygon.nb_slides<span style="color:#111111;font-family:NSimsun"></span> | number The number of polygon sides of the atom5<span style="color:#111111;font-family:NSimsun"></span> |
|
##particles.shape.image.src<span style="color:#111111;font-family:NSimsun"></span> path link | svg / png / gif / jpg Atom pictures can use custom pictures
<span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span> <span style="color:#111111;font-family:NSimsun">"http://mywebsite.com/assets/img/yop.png"</span>
|
|
##particles.shape.image.width<span style="color:#111111;font-family:NSimsun"></span> | number
(for aspect ratio) Image width |
##100<span style="color:#111111;font-family:NSimsun"></span>
|
<span style="color:#111111;font-family:NSimsun"></span>number (for aspect ratio) Image height |
<span style="color:#111111;font-family:NSimsun">100</span> |
|
#particles.opacity.value<span style="color:#111111;font-family:NSimsun"></span> | number (0 to 1) Opacity0.75<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.opacity.random<span style="color:#111111;font-family:NSimsun"></span> | boolean Random opacity
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
##particles.opacity.anim.enable<span style="color:#111111;font-family:NSimsun"></span>##boolean Gradient animation
|
true | / <span style="color:#111111;font-family:NSimsun"></span>false |
##particles.opacity.anim.speed<span style="color:#111111;font-family:NSimsun"></span> | number Gradient animation speed3<span style="color:#111111;font-family:NSimsun"></span> |
|
##particles.opacity.anim.opacity_min<span style="color:#111111;font-family:NSimsun"></span> number (0 to 1) Gradient animation opacity |
##0.25 | <span style="color:#111111;font-family:NSimsun"></span> |
<span style="color:#111111;font-family:NSimsun">boolean</span> |
true | / <span style="color:#111111;font-family:NSimsun">false</span> <span style="color:#111111;font-family:NSimsun"></span>
|
number Atomic size | <span style="color:#111111;font-family:NSimsun">20</span> |
|
#particles .size.random<span style="color:#111111;font-family:NSimsun"></span> | boolean atomic size random
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"> </span>
|
|
##particles.size.anim.enable<span style="color:#111111;font-family:NSimsun"></span> boolean Atomic gradient |
true<span style="color:#111111;font-family:NSimsun"> / </span> false<span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun"></span>#number Atomic gradient speed |
3 | |
<span style="color:#111111;font-family:NSimsun">particles.size.anim.size_min</span> |
number | <span style="color:#111111;font-family:NSimsun">0.25</span> |
<span style="color:#111111;font-family:NSimsun">particles.size.anim.sync</span> |
boolean |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.line_linked.enable</span> |
boolean 连接线 |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.line_linked.distance</span> |
number Connecting line distance | <span style="color:#111111;font-family:NSimsun">150</span> |
## particles.line_linked.color<span style="color:#111111;font-family:NSimsun"></span> | HEX (string) Linked line color#ffffff<span style="color:#111111;font-family:NSimsun"></span> |
|
##particles.line_linked.opacity<span style="color:#111111;font-family:NSimsun"></span> number (0 to 1) Link opacity |
0.5<span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun">##number The width of the connecting line</span> |
1.5 | |
##particles.move.enable<span style="color:#111111;font-family:NSimsun"></span> | boolean Atomic move true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
##particles.move.speed <span style="color:#111111;font-family:NSimsun"></span> number Atomic moving speed |
4<span style="color:#111111;font-family:NSimsun"></span>
|
|
particles.move.direction<span style="color:#111111;font-family:NSimsun"></span> string Atomic movement direction |
"none"<span style="color:#111111;font-family:NSimsun"> </span> "top" <span style="color:#111111;font-family:NSimsun"> </span> "top-right" <span style="color:#111111;font-family:NSimsun"> </span> "right" <span style="color:#111111;font-family:NSimsun"> </span> "bottom-right" <span style="color:#111111;font-family:NSimsun"> </span>
|
|
##particles.move.random<span style="color:#111111;font-family:NSimsun"></span> | Boolean mobile random direction
True <span style="color:#111111;font-family:NSimsun"></span>/ ## false <span style="color:#111111;font-family:NSimsun"></span>
|
|
##particles.move.straight<span style="color:#111111;font-family:NSimsun"></span> boolean Move directly |
true<span style="color:#111111;font-family:NSimsun"> / </span> false<span style="color:#111111;font-family:NSimsun"></span>
|
|
<span style="color:#111111;font-family:NSimsun"></span>string (out of canvas) Whether to move out of the canvas |
<span style="color:#111111;font-family:NSimsun">"out"</span> <span style="color:#111111;font-family:NSimsun">"bounce"</span>
|
|
<span style="color:#111111;font-family:NSimsun">particles.move.bounce</span> |
boolean (between particles) Whether to jump and move |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
<span style="color:#111111;font-family:NSimsun">particles.move.attract.enable</span> |
boolean Attraction between atoms |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
##particles.move.attract.rotateX<span style="color:#111111;font-family:NSimsun"></span> | number The attraction X horizontal distance between atoms3000<span style="color:#111111;font-family:NSimsun"></span> |
|
#particles.move .attract.rotateY<span style="color:#111111;font-family:NSimsun"></span> number y vertical distance |
##1500 | |
##interactivity.detect_on<span style="color:#111111;font-family:NSimsun"></span> | string Detection of interaction between atoms"canvas", "window"<span style="color:#111111;font-family:NSimsun"></span> |
|
##interactivity.events.onhover.enable<span style="color:#111111;font-family:NSimsun"></span> boolean Hover |
true<span style="color:#111111;font-family:NSimsun"> / </span> false<span style="color:#111111;font-family:NSimsun"></span>
|
|
interactivity.events.onhover.mode<span style="color:#111111;font-family:NSimsun"></span>
| string
Array selection
|
<span style="color:#111111;font-family:NSimsun">"grab"</span> Grab the nearby <span style="color:#111111;font-family:NSimsun">"bubble"</span> Bubble ball effect<span style="color:#111111;font-family:NSimsun">"repulse"</span> Knockback effect<span style="color:#111111;font-family:NSimsun">["grab", "bubble"]</span>
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.enable</span> |
boolean Click effect |
<span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
|
##interactivity.events.onclick.mode<span style="color:#111111;font-family:NSimsun"></span> |
string
Array selection |
<span style="color:#111111;font-family:NSimsun">"push"</span> <span style="color:#111111;font-family:NSimsun">"remove"</span> <span style="color:#111111;font-family:NSimsun">"bubble"</span> <span style="color:#111111;font-family:NSimsun">"repulse"</span> <span style="color:#111111;font-family:NSimsun">["push", "repulse"]</span>
|
##interactivity.events.resize<span style="color:#111111;font-family:NSimsun"></span> | boolean Interactive event adjustment
true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
|
|
interactivity.events.modes.grab.distance<span style="color:#111111;font-family:NSimsun"></span> | number Atomic interactive grab distance 100<span style="color:#111111;font-family:NSimsun"></span> |
|
#interactivity.events.modes.grab.line_linked.opacity<span style="color:#111111;font-family:NSimsun"></span>##number ( 0 to 1) Atomic interaction grab distance line opacity
|
0.75 | <span style="color:#111111;font-family:NSimsun"></span> |
number The distance between the atomic grab bubble effects | <span style="color:#111111;font-family:NSimsun">100</span> |
|
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.size</span>
|
number The size between atomic capture bubble effects | <span style="color:#111111;font-family:NSimsun">40 </span> |
##interactivity.events.modes.bubble.duration<span style="color:#111111;font-family:NSimsun"></span> | number Atomic grab bubble Ongoing events between effects(second) | <span style="color:#111111;font-family:NSimsun">0.4</span> |
##interactivity.events.modes.repulse.distance<span style="color:#111111;font-family:NSimsun"></span> | number Knockback effect distance200<span style="color:#111111;font-family:NSimsun"></span> |
|
interactivity.events.modes.repulse.duration<span style="color:#111111;font-family:NSimsun"></span>
| number Knockback effect continuous event(second) | <span style="color:#111111;font-family:NSimsun">1.2</span> |
#interactivity.events.modes.push.particles_nb<span style="color:#111111;font-family:NSimsun"></span> | number The number of particles pushed out4<span style="color:#111111;font-family:NSimsun"></span> |
|
##interactivity.events.modes.push.particles_nb<span style="color:#111111;font-family:NSimsun"></span> number |
4<span style="color:#111111;font-family:NSimsun"></span> |
|
retina_detect<span style="color:#111111;font-family:NSimsun"></span> boolean |
true<span style="color:#111111;font-family:NSimsun"> / </span> false<span style="color:#111111;font-family:NSimsun"></span>
|
The above is the detailed content of JS Library Particles.js Chinese Development Manual. For more information, please follow other related articles on the PHP Chinese website!