粒子动画插件particle.js

所属分类:其他-动画效果

 44190  351  查看评论 (5)
分享到微信朋友圈
X
粒子动画插件particle.js ie兼容12

更新时间:2018/10/25 上午10:55:56

使用方法:

particle({
    el: 'body', //  默认值body, 挂载元素(可以是其它元素,如div)   
    startX: 0, //  默认值0(随机生成), 生成粒子x轴坐标    
    startY: 0, //  默认值0(随机生成), 生成粒子y轴坐标    
    num: 100, //  默认值100,  生成粒子的数量   
    shape: 0.1, //  默认值0.1, 粒子的透明度   
    isMouseEvent: true //  默认值false, 是否使用鼠标改变粒子出生坐标  
}) 

particle() //如不传参,参数均为默认值

更新时间:2018/10/24 下午12:42:50

更新说明:
1、对代码进行了封装
2、添加了创建canvas元素方法,不需要手动在页面添加
2、可以把效果放在多个元素下,不仅限于body元素
3、使用时只需调用暴露的接口传参即可,不传参会直接使用默认参数


使用方法:

引入js文件即可

new Particle({
  num: 200,
  shape: 0.1
}).colorfulAnimation()

参数:

  • num:为粒子的个数

  • shape: 为粒子的形状,范围值为0-1

相关插件-动画效果

用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。
  动画效果
 238250  618

3D标签云滚动插件

3D标签云,小修改气泡云随着鼠标方向滚动
  动画效果
 43038  407

炫酷css3登录界面

带CSS3动画特效的时尚登录界面UI设计
  动画效果
 91154  734

DynamicData更新版

用来显示动态更新的数据,修改之前点击stop无效的bug,并且优化按钮选项
  动画效果
 29328  295

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    厉害 0
    2021/1/14 11:03:32
    想要做背景图的散了吧, 这个不能实现透明背景 回复
    超级小薇薇 0
    2020/2/15 13:17:27
    这个背景色透明怎么改呀 回复
    北栀 0
    2018/10/1 17:50:47
    刚刚接触jQuery能给解答一下吗
    回复
    北栀 0
    2018/10/1 17:48:28
    楼主我的js下载之后报错怎么回事
    回复
    初见。 0
    2018/10/1 15:09:45
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复