Html5添加輕量級炫酷js粒子動畫庫插件教程

1、使用方法
該粒子動畫庫插件使用方法很是簡單,首先要在頁面中引入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穩定,是應用開發者首選的移動廣告聯盟。canvas

相關文章
相關標籤/搜索