JS插件：粒子动画

最新推荐文章于 2024-09-13 22:06:04 发布

凝弧

最新推荐文章于 2024-09-13 22:06:04 发布

阅读量4.9k

点赞数 1

分类专栏：库 Library 文章标签： particle Particleground 粒子

本文链接：https://blog.csdn.net/wildye/article/details/80371999

版权

本文介绍了三种JavaScript粒子动画插件：canvas-nest.js、particle.js和Particleground.js。canvas-nest.js轻量级，但配置有限；particle.js提供丰富的配置选项，包括粒子颜色、形状和动态；Particleground.js支持视差效果，可利用鼠标和陀螺仪交互。每个插件都提供了安装导入方式和配置参数示例。

摘要由CSDN通过智能技术生成

1. canvas-nest.js
- 配置参数
2. particle.js
3. Particleground.js
- 安装导入
- 配置参数

1. canvas-nest.js

轻量，只有1.6 kb，

只能通过给script标签设置属性来进行配置
无法指定容器元素，默认覆盖整个页面

这里写图片描述

Github：https://github.com/hustcc/canvas-nest.js
CodePen：https://codepen.io/wildye/pen/xjmjaj

配置参数

<script color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

var canvasNext = document.createElement("script");

canvasNext.color = "0, 0, 0"; // 粒子颜色(RGB)
canvasNext.opacity = '0.5';   // 粒子透明度
canvasNext.zIndex = '-1';     // 画布层级
canvasNext.count = '150';     // 粒子数量
canvasNext.src = 'https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js';

document.body.appendChild(canvasNext)

2. particle.js

原生 JavaScript 实现
这里写图片描述

官网：https://www.awesomes.cn/repo/VincentGarreau/particles-js
Github：https://github.com/VincentGarreau/particles.js
CodePen：https://codepen.io/wildye/pen/OZrJOo

安装导入

Packages install
- npm： npm install particles.js
- Bower：bower install particles.js --save
语法：particlesJS(element, options, callback)
- element：目标容器元素，默认使用 ID 选择器，无需前缀 #
- options：参数配置，JSON对象

<!-- 目标容器元素 -->
<div id="container"></div>

<!-- 引入插件 -->
<script src="particles.min.js"></script>

<!-- 插件配置调用 -->
<script>
particlesJS("contarner", {}, function(){
    
    console.log("callback");
})
</script>

特定参数项

粒子的颜色 particles.color.value:

"#ff0000"                // HEX
{ r: 155, g: 33, b: 74 } // RGB
{ h

最低0.47元/天解锁文章