particles.js
Mark Lv4

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 ({ 
// normal options
selector: '.background',
maxParticles:450,

// options for breakpoints
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({
// options
});
// E.g. gets called on a button click
function pause () {
particles. pauseAnimation ();
}
// E.g. gets called on a button click
function resume () {
particles. resumeAnimation ();
}
  • Post title:particles.js
  • Post author:Mark
  • Create time:2020-12-19 20:03:49
  • Post link:https://m.iqimeng.com/2020/12/19/study/particles.js/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.