Home > Article > Web Front-end > Detailed explanation of the use of ParticlesJS
Detailed explanation of the use of ParticlesJS
- php中世界最好的语言Original
- 2018-04-17 16:53:453257browse
This time I will bring you a detailed explanation of the use of ParticlesJS, what are the precautions when using ParticlesJS, the following is a practical case, let's take a look.
particles.js
A lightweight JavaScript library for creating particles.
A lightweight JavaScript library for creating particle backgrounds
So, here’s how to use particles.js.
particlesJS is open source on Github: https://github.com/VincentGarreau/particles.js
A demo is provided in this project. You can directly download this project and open the index.html file in the demo to see the effect.
So, if we want to build our own project, how do we import the files?
The suggestions are as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>particles.js</title> <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> <meta name="author" content="Vincent Garreau" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" > </head> <body> <p id="particles-js"></p> <!-- scripts --> <script src="js/particles.js"></script> <script src="js/app.js"></script> </body> </html>
particles.js is its library, we must import it, app.js is the parameter Configuration file, we must also import it, but there is no need to import stats.js in the demo.
We can also introduce style.css, the background color is set in css.
Based on this template, we can add the functions we want to implement, such as registration and login functions. What needs to be noted is:
Use p to encapsulate the functional code block we want to implement, and set this p in css Absolute positioning.
The following introduces the use of parameter configuration file app.js file:
particles.number.value: Number of particles
particles.number.density: The density of particles
particles.number.density.enable: Enable the density of particles (true or false)
particles.number.density.value_area: The space occupied by each particle (available only when particle density is enabled)
particles.color.value: The color of particles (supports hexadecimal "#b61924", rgb "{r:182, g:25, b:36}", hsl, and random)
particles.shape.type: The shape of the particles ("circle" "edge" "triangle" "polygon" "star" "image")
particles.opacity.value: Transparency of particles
particles.size.anim.enable: Whether to enable particle speed (true/false)
particles.size.anim.speed： Particle animation frequency
particles.size.anim.sync: Whether the particle running speed and animation are synchronized
particles.move.speed: particle movement speed
You can configure your favorite background based on these configuration files. Two complete configuration files app.js are provided below.
Configuration file one (classic background):
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
}
Configuration file two (starry sky background):
{
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
The above is the detailed content of Detailed explanation of the use of ParticlesJS. For more information, please follow other related articles on the PHP Chinese website!