首页 前端知识 particles.js 使用教程

particles.js 使用教程

2024-10-28 20:10:12 前端知识 前端哥 770 292 我要收藏

particles.js 使用教程

particles.jsA lightweight JavaScript library for creating particles项目地址:https://gitcode.com/gh_mirrors/pa/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
    }
    

应用案例

particles.jsA lightweight JavaScript library for creating particles项目地址:https://gitcode.com/gh_mirrors/pa/particles.js

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19310.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!