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