首页 > web前端 > js教程 > ParticlesJS的使用详解

ParticlesJS的使用详解

php中世界最好的语言
发布: 2018-04-17 16:53:45
原创
3425 人浏览过

这次给大家带来ParticlesJS的使用详解,ParticlesJS使用的注意事项有哪些,下面就是实战案例,一起来看一下。

particles.js

A lightweight JavaScript library for creating particles.

一个轻量级的创建粒子背景的 JavaScript 库

那么,下面将介绍如何使用 particles.js 。

particlesJS 开源在Github上:https://github.com/VincentGarreau/particles.js

这个项目中有提供demo,可以直接下载这个项目,打开demo里面的index.html文件,即可看到效果。

那么,如果我们要构建自己的项目,该如何引入文件呢?

建议如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="utf-8">

 <title>particles.js</title>

 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">

 <meta name="author" content="Vincent Garreau" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" >

</head>

<body>

<p id="particles-js"></p>

<!-- scripts -->

<script src="js/particles.js"></script>

<script src="js/app.js"></script>

</body>

</html>

登录后复制

particles.js 是它的库,我们肯定是要引入的,app.js 是参数配置文件,我们也要引入,而 demo 中的 stats.js 就没有必要引入了。

style.css 我们也可以引入,背景颜色是在css中设置的。

基于这个模板,我们可以在上面添加我们想要实现的功能,比如说注册登录功能,需要注意的是:
用 p 来封装我们要实现的功能代码块,并且在 css 中为这个 p 设置绝对定位

下面介绍参数配置文件 app.js 文件的使用:

particles.number.value : 粒子的数量

particles.number.density : 粒子的稀密程度

particles.number.density.enable : 启用粒子的稀密程度 (true 或 false)

particles.number.density.value_area : 每一个粒子占据的空间(启用粒子密度,才可用)

particles.color.value : 粒子的颜色 (支持16进制”#b61924”,rgb”{r:182, g:25, b:36}”,hsl,以及random)

particles.shape.type: 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)

particles.opacity.value: 粒子的透明度

particles.size.anim.enable: 是否启用粒子速度(true/false)

particles.size.anim.speed: 粒子动画频率

particles.size.anim.sync: 粒子运行速度与动画是否同步

particles.move.speed: 粒子移动速度

大家可以根据这些配置文件,配置自己喜欢的背景出来,下面提供两份完整配置文件 app.js。

配置文件一(经典背景):

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

{

 "particles": {

 "number": {

  "value": 80,

  "density": {

  "enable": true,

  "value_area": 800

  }

 },

 "color": {

  "value""#ffffff"

 },

 "shape": {

  "type""polygon",

  "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": 3,

  "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": 6,

  "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": true,

  "mode""repulse"

  },

  "onclick": {

  "enable": true,

  "mode""push"

  },

  "resize": true

 },

 "modes": {

  "grab": {

  "distance": 400,

  "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": false

}

登录后复制

配置文件二(星空背景):

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

{

 "particles": {

 "number": {

  "value": 160,

  "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": 1,

  "random": true,

  "anim": {

  "enable": true,

  "speed": 1,

  "opacity_min": 0,

  "sync": false

  }

 },

 "size": {

  "value": 3,

  "random": true,

  "anim": {

  "enable": false,

  "speed": 4,

  "size_min": 0.3,

  "sync": false

  }

 },

 "line_linked": {

  "enable": false,

  "distance": 150,

  "color""#ffffff",

  "opacity": 0.4,

  "width": 1

 },

 "move": {

  "enable": true,

  "speed": 1,

  "direction""none",

  "random": true,

  "straight": false,

  "out_mode""out",

  "bounce": false,

  "attract": {

  "enable": false,

  "rotateX": 600,

  "rotateY": 600

  }

 }

 },

 "interactivity": {

 "detect_on""canvas",

 "events": {

  "onhover": {

  "enable": true,

  "mode""bubble"

  },

  "onclick": {

  "enable": true,

  "mode""repulse"

  },

  "resize": true

 },

 "modes": {

  "grab": {

  "distance": 400,

  "line_linked": {

   "opacity": 1

  }

  },

  "bubble": {

  "distance": 250,

  "size": 0,

  "duration": 2,

  "opacity": 0,

  "speed": 3

  },

  "repulse": {

  "distance": 400,

  "duration": 0.4

  },

  "push": {

  "particles_nb": 4

  },

  "remove": {

  "particles_nb": 2

  }

 }

 },

 "retina_detect": true

}

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



以上是ParticlesJS的使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板