粒子动画插件particle.js

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

 44277  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

相关插件-动画效果

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果,一共有六种模式。
  动画效果
 32013  413

jQuery延时动画插件aniAuto

该插件主要用于执行Animate.css动画库,可以实现动画延时,队列,执行时间,滞后执行,重复执行等
  动画效果
 35343  379

html5制作雪花效果

html5制作雪花效果
  动画效果
 40547  371

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 54902  490

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复