Html5添加轻量级炫酷js粒子动画库插件教程

标签：

一、使用方法
该粒子动画库插件使用方法非常简单，首先要在页面中引入particles.js文件。
<script src="js/particles.js"></script>

在页面中使用一个div来作为放置粒子的容器。
<div id="particles-js"></div>

然后可以按下面的方法调用该粒子插件：
particlesJS(‘particles-js‘, {
particles: {
color: ‘#fff‘,
shape: ‘circle‘,
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‘,
Mode : ‘grab‘,
line_linked : {
Opacity : .5
    },
Events : {
onclick: {
enable: true,
mode: ‘push‘,
nb: 4
      }
    }
  },
retina_detect: true
});

KeyMob移动广告联盟专注于移动广告、致力于为应用开发者创造最好的手机广告收入,服务好,SDK稳定,是应用开发者首选的移动广告联盟。

Html5添加轻量级炫酷js粒子动画库插件教程

标签：

原文地址：http://www.cnblogs.com/happy2015689/p/5120622.html