pgis3/particles.html at main · 0800WebDev/pgis3 · GitHub

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
<!doctype html>
<html>
  <head>
   <title>Particles - PGIS 3</title>

    <style>
        html {
    background: black;

  }
body {
    background: transparent;
}
      #particles-js{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: -1 !important;
pointer-events:none;
background:transparent;
}
.particles-js-canvas-el {
  z-index: -1 !important;

}

    </style>
  </head>
  <body>
    <div id="particles-js"></div>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script>
function particlesStart() {
particlesJS('particles-js',{
"particles":{
"number":{"value":100,"density":{"enable":true,"value_area":800}},
"color":{"value":"#ffffff"},
"shape":{"type":"circle"},
"opacity":{"value":0.08,"random":true},
"size":{"value":3,"random":true},
"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},
"move":{"enable":true,"speed":1.5,"direction":"none","straight":false,"out_mode":"out"}
},
"interactivity":{
"detect_on":"window",
"events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":false}},
"modes":{"repulse":{"distance":120,"duration":0.5}}
},
"retina_detect":true
})
}
  particlesStart();
  </script>
  </body>
</html>