JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScript 粒子运动特效库。提供一些比较绚丽、实用的特效应用于 WEB 界面，希望能达到锦上添花的作用，给用户带来些许惊喜。
理念
api 与源码设计理念信仰 Write Less, Do More 和 Keep It Simple, Stupid，希望项目是：易于使用的、性能高效的、易于维护的。
支持效果
- 粒子运动（Particle）
- 波纹运动（Wave）
- 波纹进度条（WaveLoading）
- 雪花飘落（Snow）
- 线条动画（Line）
兼容性
以下是浏览器对库的支持情况（源于此兼容性表），对于不支持的浏览器则会静默地失败：
- IE 9+
- Safari 6+
- Opera 15+
- Firefox 21+
- Chrome 23+
引入 JParticles
通过 script 标签引入
<!-- 方式一：一次性引入所有特效 -->
<script src="https://unpkg.com/jparticles/browser/jparticles.all.js"></script>
<!-- 方式二（推荐）：按需加载方式，先引入基础依赖 -->
<script src="https://unpkg.com/jparticles/browser/jparticles.base.js"></script>
<!-- 再引入特定的效果，如下面的粒子特效 -->
<script src="https://unpkg.com/jparticles/browser/particle.js"></script>
通过模块的方式在 vue 项目中使用
<div id="demo"></div>
<script>
import { Particle } from 'jparticles'
export default {
mounted() {
new Particle('#demo')
}
}
</script>
通过模块的方式在 react 项目中使用
import { Particle } from 'jparticles'
class Example extends React.Component {
componentDidMount() {
new Particle('#demo')
}
render() {
return <div id="demo"></div>
}
}
创建特效
准备一个空的 dom 元素，设置一定宽高，用于显示粒子特效。 使用 new JParticles.特效名 创建特效。
<!-- 准备一个空的 DOM 元素，设置一定宽高，否则生成的 Canvas 默认宽高为：485，300 -->
<div id="demo" style="width: 400px; height: 250px;"></div>
<script>
// 创建特效
new JParticles.Particle('#demo')
</script>
链接: https://fly63.com/nav/3905
