如何使用 tsParticles 创建背景效果

介绍

Particles.js是一个允许您创建粒子效果的库。这些是绘制在画布上的形状和对象，具有观察物理和交互性的一些行为的能力。这对于创建引人注目的背景非常有用，而无需插图或摄影。

注意：原始 repo 的开发似乎已经停止。最近创建了一个名为tsParticles的分支。本教程的内容已更新以使用此新分支。

在本教程中，您将简要介绍该库的一些功能以及加载和修改示例配置。

先决条件

要完成本教程，您需要：

  • 现代网络浏览器。
  • 熟悉 JSON 可能有助于理解配置文件。请参阅 JSON 简介。

步骤 1 — 设置项目

出于教程目的，本示例将重点介绍本地index.html文件和tsParticles内容交付网络 (CDN) 托管的库副本。

在您的终端窗口中，创建一个新的项目目录：

  • mkdir tsparticles-example

然后，导航到新的项目目录：

  • cd tsparticles-example

接下来，创建一个index.html文件：

索引.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>tsParticles</title>
  <style>
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #212121;
  }
</style>
</head>

<body>
</body>
</html>

库将需要一个divwithid来将画布挂在上面。将新添加<div id="tsparticles">到body：

索引.html
<body>
 <div id="tsparticles"></div>
</body>

然后，将 CDN 托管的库添加到body：

索引.html
<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>
</body>

注意： tsparticles.js也可以通过npm以下方式获得：

  • npm install tsparticles

接下来，tsParticles通过指定id它应该挂入的初始化（在本例中为tsparticles）：

索引.html
<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>

  <script>
    tsParticles.load('tsparticles');
  </script>
</body>

index.html在网页浏览器中访问时，您应该观察到随机散布在网页上的几个粒子。验证到目前为止的所有内容是否按预期工作，然后您可以继续添加自定义选项。

第 2 步 – 加载配置

库文档列出了许多可用的选项。这些措施包括background，interactivity，particles，和更多。

首先，将default.json其复制并粘贴为particles：

索引.html
<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff0000",
        "animation": {
          "enable": true,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0
        },
        "polygon": {
          "nb_sides": 5
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": true,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "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": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#000000",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles');
</script>

在您的tsParticles.load()通话中使用这个新变量：

<script>
  // ...

  tsParticles.load('tsparticles', particles);
</script>

index.html在 Web 浏览器中访问时，您应该观察到由线连接并穿过屏幕的小圆圈。

第 3 步 – 自定义配置

可用于tsParticles交互和相互影响的选项。您应该尝试调整值并查看它们如何影响粒子。

使用particles之前定义的 ，您可以像这样修改配置的值：

索引.html
<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 40,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff9800",
        "animation": {
          "enable": false,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "polygon",
        "stroke": {
          "width": 2
        },
        "polygon": {
          "nb_sides": 6
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": <^>20<>,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": false,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "down",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "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": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#ffffff",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles', particles);
</script>

此代码更改将使背景color切换为白色。它还将shape粒子的形状从圆形更改为六边形（六边形）。多边形的number和size已更改。删除了链接的行。在direction从改变none到bottom。

index.html在 Web 浏览器中访问时，您应该观察到金色六边形从页面向下层叠。

试验配置

为了更广泛地了解图书馆提供的潜力，您可以查看网站上提供的各种示例tsParticles。

使用下拉菜单选择一个有趣的样本。您可以使用此页面上的编辑器来修改值。然后单击重新加载以查看更改。

如果您想导出更改，请单击“更多”，然后单击“导出配置”。这将以 JSON 格式显示配置。

注意：其中一些演示可能需要额外的依赖项。例如，Font Awesome 示例需要Font Awesome 库。

花一些时间将这些新配置分配给particle之前的变量index.html并在 Web 浏览器中刷新页面。

结论

在本教程中，您学习了如何在本地使用tsParticles库（以前称为Particles.js）。

tsParticles可用于引人注目的背景。但是，您可能需要权衡浏览器支持、慢速网络上的加载时间以及速度较慢的计算机上的性能。

如果您想了解有关 JavaScript 的更多信息，请查看我们的 JavaScript 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁