GitHub 里面有详细的 API 使用方法
作者示例 Demo

结构

image.png

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>particles Demo</title>
  7.     <style class="cp-pen-styles">
  8.         #particles-js {
  9.             position: absolute;
  10.             width: 100vw;
  11.             height: 100vh;
  12.             z-index: -1;
  13.         }
  15.         body {
  16.             background: #171e2a;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="particles-js">
  23.     </div>
  24.     <script src='./particles.min.js'></script>
  25.     <script>
  26.     //particles-js 为 HTML-DOM  ID
  27.     particlesJS("particles-js", {
  28.         //颗粒参数
  29.         "particles": {
  30.             "number": {
  31.                 //离粒子显示的数量值
  32.                 "value": 100,
  33.                 //密度
  34.                 "density": {
  35.                     //激活
  36.                     "enable": true,
  37.                     //值区 值越小 显示的越多
  38.                     "value_area": 300
  39.                 }
  40.             },
  41.             "color": {
  42.                 //下面是各种可接收值的格式
  43.                 //"#b61924" 
  44.                 // {r:182, g:25, b:36} 
  45.                 // {h:356, s:76, l:41} 
  46.                 // ["#b61924", "#333333", "999999"] 
  47.                 // "random"
  48.                 "value": "#ffffff"
  49.             },
  50.             //形状
  51.             "shape": {
  52.                 //下面是各种可接收值的格式 都可以与下面的 nb_sides 边的数量结合使用
  53.                 //"circle"  园
  54.                 // "edge" 有边的 看起来像是嵌套的一种图形
  55.                 // "triangle" 三角形
  56.                 // "polygon" 多边形
  57.                 // "star" 星星
  58.                 // "image" 图片 对应下面的 image 参数
  59.                 // ["circle", "triangle", "image"]  数组混合参数 这样出来的形状就像是随机的多个形状
  60.                 "type": "circle",
  61.                 //
  62.                 "stroke": {
  63.                     "width": 1,
  64.                     "color": "#fff"
  65.                 },
  66.                 //多边形 配合上面的形状使用
  67.                 "polygon": {
  68.                     //边数
  69.                     "nb_sides": 5
  70.                 },
  71.                 //图片参数 配合上面的形状 type 为 image 使用
  72.                 "image": {
  73.                     "src": "http://www.dynamicdigital.us/wp-content/uploads/2013/02/starburst_white_300_drop_2.png",
  74.                     "width": 100,
  75.                     "height": 100
  76.                 }
  77.             },
  78.             //透明度
  79.             "opacity": {
  80.                 //数字（0到1）
  81.                 "value": 0.5,
  82.                 //布尔值
  83.                 "random": true,
  84.                 //动画参数
  85.                 "anim": {
  86.                     //激活
  87.                     "enable": false,
  88.                     //速度
  89.                     "speed": 1,
  90.                     //时间
  91.                     "opacity_min": 0.1,
  92.                     //同步 
  93.                     //布尔值
  94.                     "sync": false
  95.                 }
  96.             },
  97.             //尺寸
  98.             "size": {
  99.                 //粒子尺寸的数值 
  100.                 //注意：不可过大会报错  这个数值应该是计算推算出的一个大致的区间
  101.                 "value": 1,
  102.                 "random": false,
  103.                 "anim": {
  104.                     "enable": false,
  105.                     "speed": 20,
  106.                     "size_min": 1,
  107.                     "sync": false
  108.                 }
  109.             },
  110.             //连接线
  111.             "line_linked": {
  112.                 //激活
  113.                 "enable": false,
  114.                 //距离
  115.                 "distance": 50,
  116.                 "color": "#ffffff",
  117.                 "opacity": 0.6,
  118.                 "width": 1
  119.             },
  120.             //移动
  121.             "move": {
  122.                 "enable": true,
  123.                 //移动的速度
  124.                 "speed": 10,
  125.                 //移动的方向
  126.                 //下面是各种可接收值
  127.                 //"none" 
  128.                 // "top" 
  129.                 // "top-right" 
  130.                 // "right" 
  131.                 // "bottom-right" 
  132.                 // "bottom" 
  133.                 // "bottom-left" 
  134.                 // "left" 
  135.                 // "top-left"
  136.                 "direction": "none",
  137.                 "random": true,
  138.                 //直线运动 数值为 true 粒子动效不好看
  139.                 //布尔值
  140.                 "straight": false,
  141.                 //输出模式
  142.                 //下面是各种可接收值
  143.                 //"out" 跑到外面
  144.                 //"bounce"  反弹
  145.                 "out_mode": "out",
  146.                 //粒子之间碰撞是否反弹
  147.                 //布尔值
  148.                 "bounce": false,
  149.                 //吸引 激活之后粒子的方向会有些杂乱无章
  150.                 "attract": {
  151.                     "enable": false,
  152.                     "rotateX": 300,
  153.                     "rotateY": 1200
  154.                 }
  155.             }
  156.         },
  157.         //互动性
  158.         "interactivity": {
  159.             //检测
  160.             //下面是各种可接收值
  161.             //"canvas", "window"
  162.             "detect_on": "canvas",
  163.             //添加各种事件
  164.             "events": {
  165.                 //鼠标经过
  166.                 "onhover": {
  167.                     "enable": false,
  168.                     //模式
  169.                     //下面是各种可接收值
  170.                     //"grab" 抓住  显示的是粒子间的连接线
  171.                     // "bubble" 气泡 显示的是放大版的上面的 image src 的图片 
  172.                     // "repulse" 浅水 使粒子无法进入鼠标固定的范围
  173.                     // ["grab", "bubble"]  还可以用数组的形式来设置
  174.                     "mode": "bubble"
  175.                 },
  176.                 //点击事件
  177.                 "onclick": {
  178.                     "enable": false,
  179.                     //下面是各种可接收值
  180.                     //"push"  增加粒子
  181.                     // "remove"  删除粒子
  182.                     // "bubble" 
  183.                     // "repulse" 
  184.                     // ["push", "repulse"]
  185.                     "mode": "repulse"
  186.                 },
  187.                 //调整大小
  188.                 //布尔值
  189.                 "resize": false
  190.             },
  191.             //给上面的可设置的模式增加更多的的参数设置
  192.             "modes": {
  193.                 "grab": {
  194.                     //距离
  195.                     "distance": 150,
  196.                     //连接线
  197.                     "line_linked": {
  198.                         "opacity": 1
  199.                     }
  200.                 },
  201.                 "bubble": {
  202.                     "distance": 200,
  203.                     //尺寸
  204.                     "size": 20,
  205.                     //持续的时间
  206.                     "duration": 2,
  207.                     "opacity": 8,
  208.                     //速度
  209.                     "speed": 3
  210.                 },
  211.                 "repulse": {
  212.                     "distance": 200,
  213.                     "duration": 0.2
  214.                 },
  215.                 //增加
  216.                 "push": {
  217.                     //颗粒面积
  218.                     "particles_nb": 1
  219.                 },
  220.                 //去除
  221.                 "remove": {
  222.                     //颗粒面积
  223.                     "particles_nb": 2
  224.                 }
  225.             }
  226.         },
  227.         "retina_detect": true //视网膜检测
  228.     });
  229.     </script>
  230. </body>
  232. </html>

github Demo 地址

https://github.com/sunxiaochuan/particlesDemo

效果 Gif 图

  • 手机端

9.gif

  • PC 端

10.gif