【亲测免费】 particles.js 使用教程

项目介绍

particles.js 是一个轻量级的 JavaScript 库，用于创建粒子效果。它允许开发者轻松地在网页上添加动态的粒子背景，适用于各种创意和互动性的项目。该项目在 GitHub 上开源，由 VincentGarreau 维护。

项目快速启动

安装

你可以通过以下方式将 particles.js 集成到你的项目中：

1. 通过 CDN 引入：

   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   

2. 通过 npm 安装：

   npm install particles.js
   

基本使用

1. HTML 结构：

   <div id="particles-js"></div>
   

2. JavaScript 配置：

   particlesJS.load('particles-js', 'path/to/particles.json', function() {
     console.log('callback - particles.js config loaded');
   });
   

3. 配置文件 particles.json：

   {
     "particles": {
       "number": {
         "value": 80,
         "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": 0.5,
         "random": false,
         "anim": {
           "enable": false,
           "speed": 1,
           "opacity_min": 0.1,
           "sync": false
         }
       },
       "size": {
         "value": 10,
         "random": true,
         "anim": {
           "enable": false,
           "speed": 80,
           "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": true
   }
   

应用案例