JParticles.js - Canvas 粒子运动特效插件库

JParticles.js - Canvas 粒子运动特效插件库

2020-06-1

2.87K

jparticles.js.org

JParticles(JavaScript particles的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScript 粒子运动特效插件库。提供一些比较绚丽,实用的特效应用于WEB界面,希望能达到锦上添花的作用,给用户带来些许惊喜。

JParticles 的特效多数来源于他人分享,JParticles 像搬运工一样把它们汇集在一起,做一些细节或功能上的改进,在此,感谢原作者的创意或代码。

上手JParticles

引入 JParticles

在页面内使用 script 标签引入即可,当然也支持模块化的加载方式,不过 JParticles 仍然在 window 对象上注册了一个同名的对象,用于插件拓展。

    <!-- 引入所有特效 -->
    <!-- <script src="jparticles.all.js"></script> -->
    <!-- 推荐:根据需要加载,引入基础框架 -->
    <script src="jparticles.js"></script>
    <!-- 引入粒子特效 -->
    <script src="particle.js"></script>  
创建特效

准备一个空的 DOM 元素,设置一定宽高,用于显示粒子特效。 使用 new JParticles.特效名 创建特效。


<!-- 准备一个空的 DOM 元素,设置一定宽高,不然生成的 Canvas 默认宽高为:485,300 -->
<div id="demo" style="width: 400px; height: 250px;"></div>
<script>
    // 使用 new JParticles.特效名 创建特效
    new JParticles.particle('#demo');
</script>

这样我们的粒子运动特效就完成了!查看DEMO还有粒子运动、波浪运动、波纹模拟进度条、雪花飘落等效果



1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。