particles.js粒子背景_粒子 js背景-CSDN博客

本文链接：https://blog.csdn.net/qq_51279669/article/details/140498859

particles.js

一个轻量级的创建粒子背景的 JavaScript 库
我们先看一下效果图

标准版
在这里插入图片描述
星空版

泡泡版

下雪版

使用

下载相关配置文件
Github：https://github.com/VincentGarreau/particles.js
下载上面的demo，然后将particles.min.js、app.js、style.css提取出来

首先在项目中引入particles.min.js、app.js、style.css刚刚提出出来的三个文件

<link rel="stylesheet" href="./particles/style.css">

<script src="./particles/particles.min.js"></script>
<script src="./particles/app.js"></script>

在body中提供一个容器

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

    <div id="app">内容</div>
</body>

将粒子背景div和内容div设置定位

#particles-js{
    position: absolute;
}
#app{
    position: absolute;
    z-index: 1;
}

这样就已经看到效果了
在这里插入图片描述

修改样式

在style.css文件中设置背景色

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #E9EDF0;/*设置背景色*/
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

在app.js文件中设置粒子效果样式

particlesJS("particles-js", 
{
  "particles": {
    "number": {
      "value": 280,//原子的数量
      "density": {
        "enable": true,//启用原子的稀密程度 （true 或 false）
        "value_area": 800// 每一个原子占据的空间（启用原子密度，才可用）
      }
    },
    "color": {
      "value": "#1AB6BA"//原子的颜色
    },
    "shape": {
      "type": "circle",//原子的形状 （”circle” “edge” “triangle” “polygon” “star” “image”）
      "stroke": {
        "width": 0,//原理的宽度
        "color": "#1AB6BA"//原子颜色
      },
      "polygon": {
        "nb_sides": 5//原子的多边形边数
      }
    },
    "opacity": {
      "value": 0.5,//原子的透明度
      "random": false,//随机不透明度 true / false
      "anim": {
        "enable": false,//渐变动画true / 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,//连接线true / false
      "distance": 150,//连接线距离
      "color": "#a1c4c5",//连接线颜色
      "opacity": 0.4,//连接线不透明度
      "width": 1//连接线的宽度
    },
    "move": {
      "enable": true,//原子移动true / false
      "speed": 6,//原子移动速度
      "direction": "none",//原子移动方向（	"none", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left"）
      "random": false,//移动随机方向true / false
      "straight": false,//直接移动true / false
      "out_mode": "out",//是否移动出画布 "out", "bounce"
      "bounce": false,//是否跳动移动 true / false
      "attract": {
        "enable": false,//原子之间吸引
        "rotateX": 600,//原子之间吸引x水平距离
        "rotateY": 1200//原子之间吸引y垂直距离
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",//原子之间互动检测 "canvas", "window"
    "events": {
      "onhover": {
        "enable": true,//悬停true / false
        "mode": "grab"//悬停模式 ("grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果)
      },
      "onclick": {
        "enable": true,//点击效果true / false
        "mode": "push"//点击效果模式(push,remove,bubble,repulse)
      },
      "resize": true//互动事件调整	true / false
    },
    "modes": {
      "grab": {
        "distance": 140,//原子互动抓取距离
        "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
});