vanilla-demo/index.html at main · tsparticles/vanilla-demo · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Particles</title>
  </head>
  <body>
    <!-- tsParticles div, not required, but it's recommended -->
    <div id="tsparticles"></div>
    <!-- https://github.com/matteobruni/tsparticles -->
    <!-- https://www.jsdelivr.com/package/npm/tsparticles-slim -->
    <!-- The bundle file contains all the necessary scripts for the slim version, instead of manually including them all -->
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2.0.6/tsparticles.slim.bundle.min.js"></script>
    <!-- https://www.jsdelivr.com/package/npm/tsparticles -->
    <!-- The bundle file contains all the necessary scripts for the full version, instead of manually including them all -->
    <!--<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.0.6/tsparticles.bundle.min.js"></script>-->
    <script type="text/javascript">
      // All options can be found here: https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html
      // The slim version doesn't have the following plugins:
      // Absorbers, Emitters, PolygonMask, Interactivity Trail
      const options = {
        background: {
          color: "#000", // the canvas background color
        },
        interactivity: {
          events: {
            onClick: {
              // this handles the mouse click event
              enable: true,
              mode: "push", // this adds particles
            },
            onHover: {
              // this handles the mouse hover event
              enable: true,
              mode: "repulse", // this make particles move away from the mouse
            },
          },
          modes: {
            push: {
              quantity: 6, // number of particles to add
            },
            repulse: {
              distance: 100, // the distance of the particles from the mouse
            },
          },
        },
        particles: {
          links: {
            enable: true, // this enables links between particles
            opacity: 0.3,
            distance: 200,
          },
          move: {
            enable: true, // this makes particles move
            speed: { min: 1, max: 3 }, // this is the speed of the particles
          },
          opacity: {
            value: { min: 0.3, max: 0.7 }, // this sets the opacity of the particles
          },
          size: {
            value: { min: 1, max: 3 }, // this sets the size of the particles
          },
        },
      };

      // tsParticles.load has two parameters, the first one is the id of the container, the second one is an object with the options
      tsParticles.load("tsparticles", options);
    </script>
  </body>
</html>