扫一扫分享
JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScript 粒子运动特效库。提供一些比较绚丽、实用的特效应用于 WEB 界面,希望能达到锦上添花的作用,给用户带来些许惊喜。
api 与源码设计理念信仰 Write Less, Do More 和 Keep It Simple, Stupid,希望项目是:易于使用的、性能高效的、易于维护的。
以下是浏览器对库的支持情况(源于此兼容性表),对于不支持的浏览器则会静默地失败:
通过 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>
手机预览