超炫背景粒子插件particles.js

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

 61630  449  查看评论 (37)
超炫背景粒子插件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模仿四季交替动画

HTML5 CSS3卡通风格一年四季交替动画特效
  动画效果
 4318  38

jquery_dataStatistics动态数字翻页特效插件

在固定时间内翻页到你想要显示的数字
  动画效果
 17078  104

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 15825  105

弹框消失效果

弹框消失的各种效果,应该会有你需要的。
  动画效果
 6038  29

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

    youkie 0
    2018/1/18 14:29:16

    高度是哪里设置的啊,我要在一个为什么默认只有一屏

    回复
    杨哥 0
    2017/12/29 11:34:08
    问一下,这个背景色怎么改? 回复
    柠檬树_ 0
    2017/12/18 17:54:48

    手机上使用为什么有点卡顿?

    回复
    了了 0
    2017/12/14 11:01:56

    左上角FPS能关掉吗?

        了了0
        2017/12/14 15:21:29

        没人回我一会再来问一遍

        0
        2017/12/18 16:08:01

        可以  原文件搜索 FPS 有关的删除就行

        田宁-点点杯子0
        2018/3/7 11:25:33
        stats相关以及“count particles”块删掉就行
    回复
    WreckeD2 0
    2017/11/9 15:18:23

    我报了个错误

    Uncaught TypeError: Cannot read property 'getElementsByClassName' of null

        at window.particlesJS (particles.min.js:9)

        at app.js:14

        ○ 凯旋0
        2018/4/14 17:11:02
        需要把js文件的引入放在DOM结构之后
    回复
    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
取消回复