粒子 JS - Javascript

粒子 JS 是一款基于 Javascript 的粒子动画库。它提供了丰富的选项和灵活的配置，可以创建出各种炫酷的粒子效果。下面将介绍如何使用粒子 JS 来创建属于自己的粒子动画。

安装

你可以通过 npm 安装：

npm install particles-js

或者通过 CDN 使用：

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

使用

添加一个容器元素（例如 div）作为粒子效果的容器：

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

在你的 Javascript 中初始化粒子效果：

particlesJS('particles-js', {
  "particles": {
    "number": {"value": 80},
    "color": {"value": "#ffffff"},
    "shape": {"type": "circle"},
    "opacity": {"value": 0.5},
    "size": {"value": 3},
    "line_linked": {"color": "#ffffff"}
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {"enable": true, "mode": "repulse"},
      "onclick": {"enable": true, "mode": "push"}
    }
  }
});

最后添加粒子效果的样式：

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

配置

粒子 JS 支持非常多的选项和配置，可以实现各种不同的样式和效果。下面列举一些常用的配置：

particles.number

粒子数量。可以设置一个数值或一个对象，例如：

"number": {
  "value": 80,
  "density": {
    "enable": true,
    "value_area": 800
  }
}

其中 density.enable 表示是否开启粒子密度控制，value_area 表示粒子密度的大小。

particles.color

粒子颜色。可以设置一个颜色值或一个对象，例如：

"color": {
  "value": "#ffffff"
}

particles.shape

粒子形状。可以设置一个形状名称或一个对象，例如：

"shape": {
  "type": "circle"
}

目前支持的形状有 circle、edge、triangle、polygon、star、image。

particles.opacity

粒子透明度。可以设置一个透明度值或一个对象，例如：

"opacity": {
  "value": 0.5,
  "random": true,
  "anim": {"enable": true, "speed": 1, "opacity_min": 0, "sync": false}
}

其中 random 表示是否随机生成透明度，anim.enable 表示是否开启动画。

particles.size

粒子大小。可以设置一个大小值或一个对象，例如：

"size": {
  "value": 3
}

particles.line_linked

粒子连线。可以设置一个对象，例如：

"line_linked": {
  "enable": true,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
}

其中 distance 表示粒子之间连线的距离，width 表示连线的宽度。

interactivity

交互事件。可以设置一个对象，例如：

"interactivity": {
  "detect_on": "canvas",
  "events": {
    "onhover": {"enable": true, "mode": "repulse"},
    "onclick": {"enable": true, "mode": "push"}
  }
}

其中 detect_on 表示所监听的事件发生在哪个元素上，events.onhover 表示鼠标滑过粒子时的交互事件，events.onclick 表示鼠标点击粒子时的交互事件。

总结

粒子 JS 是一款非常强大的 Javascript 粒子动画库，它提供了丰富的选项和灵活的配置，可以创建出各种炫酷的粒子效果。通过配置不同的选项，你可以创建出适合自己项目的粒子效果。