超炫背景粒子插件particles.js

所属分类:其他,UI-动画效果,背景

 22327  220  查看评论 (22)
超炫背景粒子插件particles.js ie兼容10

使用

加载 particles.js和配置粒子

<div id="particles-js"></div>
<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

选项

keyoption type / notesexample
particles.number.valuenumber40
particles.number.density.enablebooleantrue / false
particles.number.density.value_areanumber800
particles.color.valueHEX (string)
RGB (object)
HSL (object)
array selection (HEX)
random (string)
"#b61924"
{r:182, g:25, b:36}
 {h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.typestring
array selection
"circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.widthnumber2
particles.shape.stroke.colorHEX (string)"#222222"
particles.shape.polygon.nb_slidesnumber5
particles.shape.image.srcpath link
svg / png / gif / jpg
"assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber
(for aspect ratio)
100
particles.shape.image.heightnumber
(for aspect ratio)
100
particles.opacity.valuenumber (0 to 1)0.75
particles.opacity.randombooleantrue / false
particles.opacity.anim.enablebooleantrue / false
particles.opacity.anim.speednumber3
particles.opacity.anim.opacity_minnumber (0 to 1)0.25
particles.opacity.anim.syncbooleantrue / false
particles.size.valuenumber20
particles.size.randombooleantrue / false
particles.size.anim.enablebooleantrue / false
particles.size.anim.speednumber3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue / false
particles.line_linked.enablebooleantrue / false
particles.line_linked.distancenumber150
particles.line_linked.colorHEX (string)#ffffff
particles.line_linked.opacitynumber (0 to 1)0.5
particles.line_linked.widthnumber1.5
particles.move.enablebooleantrue / false
particles.move.speednumber4
particles.move.directionstring"none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.randombooleantrue / false
particles.move.straightbooleantrue / false
particles.move.out_modestring
(out of canvas)
"out"
"bounce"
particles.move.bounceboolean
(between particles)
true / false
particles.move.attract.enablebooleantrue / false
particles.move.attract.rotateXnumber3000
particles.move.attract.rotateYnumber1500
interactivity.detect_onstring"canvas", "window"
interactivity.events.onhover.enablebooleantrue / false
interactivity.events.onhover.modestring
array selection
"grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enablebooleantrue / false
interactivity.events.onclick.modestring
array selection
"push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resizebooleantrue / false
interactivity.events.modes.grab.distancenumber100
interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)0.75
interactivity.events.modes.bubble.distancenumber100
interactivity.events.modes.bubble.sizenumber40
interactivity.events.modes.bubble.durationnumber
(second)
0.4
interactivity.events.modes.repulse.distancenumber200
interactivity.events.modes.repulse.durationnumber
(second)
1.2
interactivity.events.modes.push.particles_nbnumber4
interactivity.events.modes.push.particles_nbnumber4
retina_detectbooleantrue / false



相关插件-动画效果,背景

css3实现文字3d

纯css3 写出文字3d效果
  动画效果
 6686  41

商品飞入购物车动画效果

jQuery商品飞入购物车动画效果
  动画效果
 10337  104

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 10460  111

仿天猫购物车特效

仿天猫加入购物车动画特效
  动画效果
 13368  93

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币

    让我感激你、曾予我欢颜 0
    2017/3/24 17:31:12
    茗恬 0
    2017/3/24 11:45:24
    很棒,做背景炫酷无边
        茗恬0
        2017/3/24 11:46:02

        6666

    回复
    zixinweixin 0
    2017/3/21 15:03:28

    怎样控制闪烁效果,希望它可以闪的快些,像星星那样

    回复
    大麦 0
    2017/3/16 9:47:04
    请问怎么调整粒子的移动速度啊,感觉有点快,放缓一点?
        大麦1
        2017/3/16 9:50:27

        找到了,在particles.move.speed调整~~

    回复
    guangshuowang 0
    2017/1/9 16:01:19

    这个当背景的总是在最上层,页面内容被挡住,使用z-index不起作用,什么原因?

        不曾有黑夜0
        2017/3/14 14:32:24

        要加上相对定位

    回复
    ? Mr.Xing 0
    2017/1/5 9:01:53
    初相识 0
    2016/12/15 16:12:16

    请问为什么我用了后 刷新页面默认状态没有效果出来只有右击点开控制器才会出来效果

    回复
    双鱼座的spring 0
    2016/11/8 14:11:42
    为什么把它当作背景之后,给页面填充内容的时候,动画部分会在内容下面呢?求助
        zgpjh0
        2016/11/20 13:11:51
        我也想问
        bloom1
        2016/12/4 21:12:35
        用z-index
    回复
    阳光宅男 0
    2016/10/28 11:10:47
    求助~怎么去掉页面左上角的FPS啊。。?
        阳光宅男0
        2016/10/28 16:10:55
        好蠢。。我自己看了下,把含有stats的那段script删掉就可以了。
    回复
    时光荏-冉 0
    2016/10/25 16:10:46
取消回复