抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

particlesJS 粒子背景的库 使用简介

发布于：Jun 2, 2017

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 动画容器 -->
<div id="particles-js"></div>
<!-- 库引入 -->
<script src="particles.js"></script>
<!-- 配置及使用 -->
<script src="app.js"></script>

<style>

/*
这句很关键 如果不设置的话大小总会出现偏移的 不过按照官方的说应该是 #particles-js 也就是容器id 可不知道为啥是canvas类名
还有个问题就是我这个文件不知道从哪里来的,好像跟从官方复制的不一样,把Github上的复制到文件里就报错了
*/
.particles-js-canvas-el {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    /*z-index:-1;*/ /*有的说这句必须加 要不会阻挡前面内容 不过我这次用的时候没出现 反而会多退后一层*/
}
</style>

注意: 如果下次样式还出现偏移,就按原来官方的试试 使用#particles-js 写样式

1
2
3
4
5
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
/* particles.json 是具体的 配置内容 */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

配置解说:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 {	//dom标签
    "particles": {
        "number": { //粒子的数量
            "value": 80,
            "density": {  //粒子的稀密程度 这个轻易别该 会死机 越大越稀疏
                "enable": true,
                "value_area": 1000  // 每一个粒子占据的空间
            }
        },
        "color": {
            "value": ['#2d8cf0', '#19be6b', '#ff9900', '#ed3f14'] //粒子颜色 （支持16进制”#b61924”，rgb”{r:182, g:25, b:36}”，hsl，以及random）['#2d8cf0', '#19be6b', '#ff9900', '#ed3f14']
        },
        "image": {  //如果使用图片 这里设置
            "src": "img/github.svg",
            "width": 100,
            "height": 100
        },
        "shape": {
            "type": "circle", // 粒子的形状 （”circle” “edge” “triangle” “polygon” “star” “image”）
            "stroke": { // 粒子边缘线条 宽度和颜色
                "width": 0,
                "color": "#000000"
            },
            "polygon": {  //多变形状,不太理解
                "nb_sides": 5
            },
        },
        "opacity": {
            "value": 0.75,  //粒子透明度 (0~1)
            "random": true,  //随机透明度
            "anim": {
                "enable": false,  //开启动画 这样粒子的透明度将不断变化
                "speed": 1,     //数值越大 速度变化越快
                "opacity_min": 0.1, //应该是透明变化幅度
                "sync": false
            }
        },
        "size": {
            "value": 10,  //粒子大小
            "random": true,
            "anim": {
                "enable": false, //大小动画
                "speed": 40,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {  //连线
            "enable": true,
            "distance": 150,  //相距多少连线
            "color": "#ffffff",
            "opacity": 0.4, //透明度
            "width": 1
        },
        "move": {
            "enable": true, //如果关闭了 就没有画面了
            "speed": 4,   //越大速度越快
            "direction": "none", //移动方向 none碰撞运动
            "random": false,   //粒子随机运动了 也没物理特性了
            "straight": false,   //静止 
            "out_mode": "out",  //粒子是否可以出边缘 out/bounce
            "bounce": false,      //粒子之间是否碰撞
            "attract": {       //这个不知道是干啥的 好像粒子互相吸引
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {  //鼠标是否互动
                "enable": false,
                "mode": "repulse" //互动模式 ["grab", "bubble","repulse"] 第一个是连线 第二个粒子放大  第三个是推开
            },
            "onclick": {
                "enable": false,
                "mode": "repulse"  //点击特效 "push" ["push", "remove","bubble" ,"repulse"] push是添加 其他的和上面一样
            },
            "resize": true  //重画不太懂干什么用的
        },
        "modes": {  //这里是模式的设置
            "grab": {
                "distance": 140,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 200,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true //不知道干啥的
}

例子:
自己的

星空

经典

泡泡版

##参考文档
Github仓库
particlesJS使用简介

这个是个整合 其配置比上面简单很多 但本质还是上面的particles
jparticles.js

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://elickzhao.github.io/2017/06/particlesJS%20%E7%B2%92%E5%AD%90%E8%83%8C%E6%99%AF%E7%9A%84%E5%BA%93%20%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B/

更新于：Sep 10, 2021

前端

js

评论