Home > Article > Web Front-end > A brief introduction to using ParticlesJS with JS library

A brief introduction to using ParticlesJS with JS library

巴扎黑Original: 2017-09-13 09:31:181913browse

ParticlesJS is a lightweight JavaScript library for creating particle backgrounds. Next, I will share with you an introduction to the use of JS library ParticlesJS through this article. Friends who are interested should take a look

particles.js

A lightweight JavaScript library for creating particles.

A lightweight JavaScript library for creating particle backgrounds

Let’s take a look at the renderings first:

Standard Version:

A brief introduction to using ParticlesJS with JS library

Starry sky version:

A brief introduction to using ParticlesJS with JS library

Bubble version:

A brief introduction to using ParticlesJS with JS library

Snow version:

A brief introduction to using ParticlesJS with JS library

What can we do with this?

I think this is more suitable for pages without background, or if you can’t find a suitable picture to use as the background, then we can all use this.

For example:

A brief introduction to using ParticlesJS with JS library

or

A brief introduction to using ParticlesJS with JS library

## Well, the effect is quite good.

So, here’s how to use particles.js.

particlesJS is open source on Github: https://github.com/VincentGarreau/particles.js

This project provides a demo. You can download the project directly and open the index in the demo. html file to see the effect.

So, if we want to build our own project, how do we introduce 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 introduce it, app.js is the parameter configuration file, we also It needs to be introduced, but there is no need to introduce stats.js in the demo.

style.css We can also introduce that the background color is set in css.

Based on this template, we can add the functions we want to implement, such as the registration and login function. What needs to be noted is:

Use p to encapsulate the functional code block we want to implement, and in Set absolute positioning for this p in css.

The following introduces the use of the parameter configuration file app.js file:

particles.number.value: The 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 (enable particle density, Only available)

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 particle ("circle" "edge" "triangle" "polygon" "star" "image")

particles.opacity.value: The transparency of the particle

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 is synchronized with the animation

particles.move.speed: The particle moving speed

You can configure your favorite background based on these configuration files. Two copies are provided below. Complete configuration file app.js.

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
}

The above is the detailed content of A brief introduction to using ParticlesJS with JS library. 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：Summary of JavaScript key knowledge points 2Next article：Summary of JavaScript key knowledge points 2

Related articles

See more