UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

超炫背景粒子插件particles.js

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

 153954  965  查看评论 (53)
分享到微信朋友圈
X
超炫背景粒子插件particles.js ie兼容10
 查看演示  website  立即下载

使用

加载 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实现打火机火焰动画

 这又是一款很酷的纯CSS3动画特效，它是一个可以点燃的打火机，当你用鼠标滑过这只打火机时，打火机就会打开，然后开始出现火焰燃烧的动画特效。另外要说明的是，整个动画都是利用纯CSS3实现的
  动画效果
 36215  319

纯css仿qq浏览器官网的彗星

 仿qq浏览器官网的彗星，纯css
  动画效果
 41346  498

cs3旋转动画实现地球周转

 css33d效果旋转变形
  动画效果
 42527  439

文字插件特效_文字动画特效js插件

 此插件是针对文字写的一个动画插件，主要可运用在开场和出场的时候，插件方便小巧，只需要配置参数即可达到数十种动画效果
  动画效果
 57853  855

讨论这个项目（53）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    vivi666 0
    2020/8/28 18:05:08
    页面静置时间久了，背景的粒子会变成特别大的圆圈,是什么原因呢？ 回复
    壹起航-建站部设计 0
    2020/5/8 15:18:07
    为啥我接入了要按F12调整窗口才显示出来? 回复
    凯少? 0
    2020/2/26 15:43:25
    背景可以改 粒子的形状或者颜色怎么改不了
        凯少?0
        2020/2/26 16:13:27
        看到了 在配置文件app.js直接改
    回复
    ??艳芬 0
    2019/9/23 14:00:42
    这个插件太棒了吧
        凯少?0
        2020/2/26 15:43:37
        背景可以改 粒子的形状或者颜色怎么改不了
    回复
    诠释灬倪的? 0
    2019/7/19 13:36:52
    wovue项目要用请问这个背景图怎么用啊
    回复
    刘志鹏 0
    2019/5/5 16:03:42
    bootstrap上pc端显示正常，到移动端就会覆盖页面按钮，如果设置z-index就会使整个粒子被盒子覆盖，怎么解决啊，移动端粒子效果显示按钮就无法点击，按钮能点击，粒子效果就无法显示 回复
    1874 0
    2019/3/24 11:25:26
    怎么让这个效果固定在网页上呀
        奔跑吧奶奶0
        2019/4/29 17:43:45
        写高度和定位 浮动 等 都可以啊
    回复
    yopapa 0
    2018/10/12 15:15:11
    想请教下，如何降低此插件出现的大量能耗问题？ 回复
    taochang 0
    2018/8/9 14:33:27
    请问这个可以把某个粒子换成小图标，跟着线一起动吗？ 回复
    十贰-Twelve 0
    2018/7/31 14:33:52
    怎麽用呃?做?背景?
        西瓜1
        2018/7/31 15:14:57
        用div css浮动层布局就可以了。
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复