超炫背景粒子插件particles.js

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

 42313  372  查看评论 (28)
超炫背景粒子插件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



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

jQuery字体特效插件animatext.js

css3炫酷字体特效
  动画效果
 1727  17

jquery折纸效果

ORIDOMI实现的jquery折纸效果效果非常棒
  动画效果
 11434  51

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 15954  13

超炫背景粒子效果

超炫背景粒子效果
  动画效果
 16803  235

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

    a?? 骑上蒲公英?去兜风 0
    2017/8/27 23:29:48
    小纸条 0
    2017/8/18 16:12:09

    请问下,我想鼠标移入范围内粒子自动连线,而不是避开,应该改哪里啊?非常感谢!

        0
        2017/8/23 9:25:11

        onhover

    回复
    诸葛轩 0
    2017/7/20 16:59:38

    特效在最上层的时候 下面的内容部分无法点击怎么办

    回复
    MIKASA 0
    2017/5/31 13:04:47

    感谢分享,project用上了

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

        6666

        ?亠0
        2017/9/19 16:54:19

        我是小白!第一次做!想问一下我想用这个做背景,但我移动这个的时候我的网页就被这个粒子图给覆盖了这是怎么回事!我想让这个粒子图在我的网页里做背景,但就像布一样给盖住了

    回复
    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
取消回复