html5轻量级炫酷js粒子动画库插件

发布时间：2019/06/30 来源：互联网浏览：关键词：HTML5 粒子动画

html5轻量级炫酷js粒子动画库插件

简要教程

这是一款基于html5 canvas的轻量级炫酷js粒子动画库插件。该js粒子动画库插件可以设置粒子的形状、旋转、分布、颜色等属性，还可以动态添加粒子，效果非常酷。

使用方法

该粒子动画库插件使用方法非常简单，首先要在页面中引入particles.js文件。

<scriptsrc="js/particles.js"></script>

在页面中使用一个div来作为放置粒子的容器。

<divid="particles-js"></div>

然后可以按下面的方法调用该粒子插件：

/* particlesJS('dom-id', params);
/* @dom-id : set the html tag id [string, optional, default value : particles-js]
/* @params: set the params [object, optional, default values : check particles.js] */
 
/* config dom id (optional) + config particles params */
particlesJS('particles-js', {
  particles: {
    color:'#fff',
    shape:'circle',// "circle", "edge" or "triangle"
    opacity: 1,
    size: 4,
    size_random:true,
    nb: 150,
    line_linked: {
      enable_auto:true,
      distance: 100,
      color:'#fff',
      opacity: 1,
      width: 1,
      condensed_mode: {
        enable:false,
        rotateX: 600,
        rotateY: 600
      }
    },
    anim: {
      enable:true,
      speed: 1
    }
  },
  interactivity: {
    enable:true,
    mouse: {
      distance: 250
    },
    detect_on:'canvas',// "canvas" or "window"
    mode:'grab',
    line_linked: {
      opacity: .5
    },
    events: {
      onclick: {
        enable:true,
        mode:'push',// "push" or "remove" (particles)
        nb: 4
      }
    }
  },
  /* Retina Display Support */
  retina_detect:true
});

插件中的可用参数都非常简单，可以参考上面的代码。

效果预览下载链接