学习particles.js 给网页添加粒子特效

今天我们来学习一下Particles.js是一个开源的轻量级JavaScript库，它帮助你创建漂亮的交互式粒子效果。它基于HTML5 canvas元素，能够在。它可以通过调整不同的选项来定制化等等。除此之外，particles.js 还支持响应式设计，可以让效果在不同的设备上呈现出不同的表现。这个库非常适合，以增加互动的效果并吸引用户的注意力。

文章共1,468字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

Power||Power

3404人浏览 · 2023-03-09 18:45:05

Power||Power · 2023-03-09 18:45:05 发布

今天我们来学习一下particles.js

Particles.js是一个开源的轻量级JavaScript库，它帮助你创建漂亮的交互式粒子效果。它基于HTML5 canvas元素，能够在背景中生成动态的粒子效果。它可以通过调整不同的选项来定制化粒子形状、数量、大小、颜色、运动速度等等。除此之外，particles.js 还支持响应式设计，可以让效果在不同的设备上呈现出不同的表现。这个库非常适合用于网站、应用程序和其他数字媒体项目中，以增加互动的效果并吸引用户的注意力

官网地址:particles.js – 一个轻量级、无依赖性和响应迅速的 JavaScript 插件，用于粒子背景。 (marcbruederlin.github.io)

先看效果

jcode

安装

使用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资源链接
“https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js”

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	可选:包含断点和选项的对象数组