今天我们来学习一下particles.js
Particles.js是一个开源的轻量级JavaScript库，它帮助你创建漂亮的交互式粒子效果。它基于HTML5 canvas元素，能够在背景中生成动态的粒子效果。它可以通过调整不同的选项来定制化粒子形状、数量、大小、颜色、运动速度等等。除此之外，particles.js 还支持响应式设计，可以让效果在不同的设备上呈现出不同的表现。这个库非常适合用于网站、应用程序和其他数字媒体项目中，以增加互动的效果并吸引用户的注意力
官网地址:particles.js – 一个轻量级、无依赖性和响应迅速的 JavaScript 插件，用于粒子背景。 (marcbruederlin.github.io)
先看效果
安装
使用npm
npm install particlesjs —-save // 引入粒子 js import Particles from "particlesjs";
使用CDN链接
https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js // 使用 <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
基本使用
HTML 结构
<canvas class="background"> </canvas>
CSS结构
body { margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100vh; background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); } .background { position: absolute; top: 0; left: 0; z-index: 999; }
JS部分
记得引入cdn资源链接 "cdnjs.cloudflare.com/ajax/libs/p…"
window.onload = function () { Particles.init({ // 选择canvas画布元素 selector: '.background', // 设置最大粒子数 maxParticles: 100, // 设置粒子的移动速度 speed: 1, // 设置粒子颜色 color: '#8ACAFF', // 开启点连线 connectParticles: true, // 设置 minDistance: 140, // 设置响应式配置项的调整 responsive: [ { // 当浏览器窗口宽小于768像素大小采用以下配置 breakpoint:768, options: { maxParticles: 200, color: '#9400D3', connectParticles: false } }, { // 当浏览器窗口宽小于425像素大小采用以下配置 breakpoint:425, options: { maxParticles:100, connectParticles:true } }, { // 当浏览器窗口宽小于320像素大小采用以下配置 breakpoint:320, options: { maxParticles:0 } } ] }) }
配置项详解
| 配置项 | 属性值类型 | 默认值 | 属性详解 |
| selector | string | 画布元素的CSS选择器 | |
| maxParticles | integer | 100 | 可选:最大颗粒量 |
| sizeVariations | integer | 3 | 可选:大小变化量 |
| speed | integer | 0.5 | 可选:粒子的移动速度 |
| color | string 或者数组 | #0000000 | 可选:颗粒颜色和连接线 |
| minDistance | integer | 120 | 可选:连接线的距离，单位为px |
| connectParticles | boolean | false | 可选:如果需要绘制连接线，则为true/false |
| responsive | array | null | 可选:包含断点和选项的对象数组 |
方法
| Method | Description |
| pauseAnimation | 暂停/停止粒子动画 |
| resumeAnimation | 继续粒子动画 |
