JS Library Particles.js Chinese Development Manual-JS Tutorial-php.cn

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>

Copy after login

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');
});

Copy after login

particles.json is the main configuration file

Pay attention File order, otherwise problems will occur

Actual 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=&#39;particles.min.js&#39;></script> 这个玩意需要放在下面
 <script src="index.js"></script>
</html>

Copy after login

If you need to download the demo, please go to the QQ group, The black atom effect is very sci-fi, not bad

Create your own sci-fi effect based on css color and json configuration file

Parameters

number Quantityboolean number Area distribution density sizeHEX (string) number The width of the principleHEX (string) Atomic colornumber The number of polygon sides of the atomsvg / png / gif / jpg Atom pictures can use custom picturesnumber #particles.shape.image. heightnumber (0 to 1) Opacityboolean Random opacitytruenumber Gradient animation speed##0.25#particles.opacity .anim.syncparticles.size.valueboolean atomic size random#particles.size.anim. speed3HEX (string) Linked line color##particles.line_linked.widthboolean Atomic move Boolean mobile random direction ##particles.move.out_modenumber The attraction X horizontal distance between atoms##1500string Detection of interaction between atomsstring boolean Interactive event adjustmentnumber Atomic interactive grab distance0.75 interactivity.events.modes.bubble.distancenumber Atomic grab bubble Ongoing events between effectsnumber Knockback effect distancenumber Knockback effect continuous eventnumber The number of particles pushed out

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!

Key value	Parameter options/description	Example
`##particles.number.value<span style="color:#111111;font-family:NSimsun"></span>`		`40<span style="color:#111111;font-family:NSimsun"></span>`
`particles.number.density.enable<span style="color:#111111;font-family:NSimsun"></span>`		`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>`		`800<span style="color:#111111;font-family:NSimsun"></span>`
##particles.color.value`<span style="color:#111111;font-family:NSimsun"></span>`	RGB (object) HSL (object) Array selection (HEX) Random (string) Color of atoms	`<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>`		`2<span style="color:#111111;font-family:NSimsun"></span>`
`particles.shape.stroke.color<span style="color:#111111;font-family:NSimsun"></span>`		`"#222222"<span style="color:#111111;font-family:NSimsun"></span>`
`particles.shape.polygon.nb_slides<span style="color:#111111;font-family:NSimsun"></span>`		`5<span style="color:#111111;font-family:NSimsun"></span>`
##particles.shape.image.src`<span style="color:#111111;font-family:NSimsun"></span>`path link	`<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>`	(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>`		`0.75<span style="color:#111111;font-family:NSimsun"></span>`
`particles.opacity.random<span style="color:#111111;font-family:NSimsun"></span>`		`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`		`/ <span style="color:#111111;font-family:NSimsun"></span>false`
`##particles.opacity.anim.speed<span style="color:#111111;font-family:NSimsun"></span>`		`3<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		`<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>`		`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`
`<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>`		`#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>`		`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>"bottom" <span style="color:#111111;font-family:NSimsun">"bottom-left"</span> <span style="color:#111111;font-family:NSimsun">"left"</span> <span style="color:#111111;font-family:NSimsun">"top-left"</span>`
`##particles.move.random<span style="color:#111111;font-family:NSimsun"></span>`		`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>`		`3000<span style="color:#111111;font-family:NSimsun"></span>`
#particles.move .attract.rotateY`<span style="color:#111111;font-family:NSimsun"></span>`number y vertical distance
`##interactivity.detect_on<span style="color:#111111;font-family:NSimsun"></span>`		`"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>`	Array selection Hover mode	`<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 Click effect mode	`<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>`		`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>`		`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`		`<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>`	(second)	`<span style="color:#111111;font-family:NSimsun">0.4</span>`
`##interactivity.events.modes.repulse.distance<span style="color:#111111;font-family:NSimsun"></span>`		`200<span style="color:#111111;font-family:NSimsun"></span>`
`interactivity.events.modes.repulse.duration<span style="color:#111111;font-family:NSimsun"></span>`	(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>`		`4<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>`