search

Home  >  Article  >  Web Front-end  >  JS Library Particles.js Chinese Development Manual

JS Library Particles.js Chinese Development Manual

巴扎黑
巴扎黑Original
2017-09-15 09:18:482476browse

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(&#39;particles-js&#39;, &#39;assets/particles.json&#39;, function() {
 console.log(&#39;callback - particles.js config loaded&#39;);
});

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>

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
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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to the code for using Particles.js to create a dynamic background effect of stunning particles imitating ZhihuNext article：Introduction to the code for using Particles.js to create a dynamic background effect of stunning particles imitating Zhihu

Related articles

See more