particles.js学习 今天突发奇想优化下主题,想起了之前看过炫酷的星云效果,就搜索了下…
效果见主页
Installation To install particles.js you can download the latest version, install it via npm:
1 npm install particlesjs —-save
or use the CDN:
1 https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js
Usage 1 2 3 4 5 6 <body > … <script src = "path /to /particles.min.js " > </script > </body >
Add a canvas element to your markup (it should be the last element):
1 2 3 4 5 6 7 8 9 10 11 <body > … <canvas class = "background " > </canvas > <script src = "path /to /particles.min.js " > </script > </body >
And Initialize the plugin on DOM ready:
1 2 3 4 5 6 7 window .onload = function ( ) { Particles. init ({ selector: '.background' }); };
Options
Option
Type
Default
Description
selector
string
-
Required: CSS selector of your canvas element
maxParticles
integer
100
Optional: Maximum amount of particles
sizeVariations
integer
3
Optional: Amount of size variations
speed
integer
0.5
Optional: Movement speed of the particles
color
string or string[]
#000000
Optional: Color(s) of the particles and connecting lines
minDistance
integer
120
Optional: Distance in px for connecting lines
connectParticles
boolean
false
Optional: true/false if connecting lines should be drawn
responsive
array
null
Optional: Array of objects containing breakpoints and options
Responsive option With the responsive option, you can add or override options for different screen sizes:
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 Particles. init ({ selector: '.background', maxParticles:450, responsive: [ { breakpoint: 768, options: { maxParticles: 200, color: '#48F2E3', connectParticles:false } }, { breakpoint:425, options: { maxParticles: 100, connectParticles: true } }, { breakpoint: 320, options: { maxParticles: 0 // disables particles.js } } ] });
Methods
Method
Description
pauseAnimation
Pauses/stops the particle animation
resumeAnimation
Continues the particle animation
Use the public methods 1 2 3 4 5 6 7 8 9 10 11 var particles = Particles.init({ }); function pause () { particles. pauseAnimation (); } function resume () { particles. resumeAnimation (); }