particles.js_使用Particles.js创建很棒的背景效果

潘意

2023-12-01

particles.js

By far, one of my favorite libraries for spicing up a landing page is particles.js. In a few minutes you can have a sleek and elegant sci-fi look that can completely change the overall feel of the page. You can find some amazing examples of what you can create on their official site.

到目前为止，我最喜欢的用于增添目标网页的库之一是particles.js。几分钟后，您就可以拥有时尚优雅的科幻外观，可以完全改变页面的整体感觉。您可以在他们的官方网站上找到一些您可以创建的惊人示例。

Since their documentation takes more of a ‘play around and figure it out yourself’ approach, this article aims to, hopefully, give more of a structured guide into its uses and capabilities.

由于他们的文档采用了更多的“玩弄自己弄清楚”的方法，因此，本文旨在提供更多有关其用法和功能的结构化指南。

So let’s get started…

因此，让我们开始吧...

安装 (Installation)

The obvious first step would be to install it through npm:

显而易见的第一步是通过npm安装它：

$ npm install particles.js

Or to just use the CDN in a script tag: https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js

或仅在脚本标记中使用CDN： https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js : https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js

If you use a local installation and get an error saying your file path 'was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)’, then you may need to use the full path to the particles.js file.

如果您使用本地安装，并收到一条错误消息，指出您的文件路径“由于MIME类型(“ text / html”)不匹配(X-Content-Type-Options：nosniff)”而被阻止，则您可能需要使用完整粒子文件的路径。

Instead use "./node_modules/particles.js/particles.js"

而是使用"./node_modules/particles.js/particles.js"

档案设定 (File Setup)

We only need three files to get started, the expected index.html and app.js with a particles.json file where we’ll define how we want the particles configured.

我们只需要三个文件就可以开始使用了，期望的index.html和app.js以及一个particles.json文件，在这里我们将定义粒子的配置方式。

index.html

All we need in our html file is a div with an id of particles-js for the library to hook the canvas onto:

在我们的html文件中，我们需要的是一个ID为particles-js的div，供库将画布挂接到以下位置：

<!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>Particles</title>
</head>

<body>
  <div id="particles-js"></div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <!-- Or -->
  <script src="particles.js"></script>
</body>
</html>

app.js (app.js)

All we need here is the particlesJS.load function, which takes two arguments: the element you want it to be displayed onto (#particles-js), and the name of the configuration file (particles.json).

这里我们需要的是particlesJS.load函数，该函数带有两个参数：要显示在其上的元素( #particles-js )和配置文件的名称( particles.json )。

particlesJS.load('particles-js', 'particles.json');

默认配置 (Default Configuration)

Now that the boilerplate’s set up, we can start with the fun part. Since particles.js has it’s own defaults you don’t 'need’ to pass anything in besides some open curly brackets.

现在已完成样板设置，我们可以从有趣的部分开始。由于particles.js具有其自己的默认值，因此您无需“需要”传递一些开放的大括号。

See the Pen Particles JS Example #1 by Alligator.io (@alligatorio) on CodePen.

请参阅CodePen上Alligator.io( @alligatorio ) 编写的Pen Particles JS Example＃1 。

Not too exciting, right? Let’s jazz it up a bit.

不太令人兴奋吧？让我们爵士一点。

组态 (Configuration)

The particles.json has two main objects, particles for controlling the look and feel of the particles, and interactivity for handling all of the effects. We’ll start with manipulating the appearance.

particles.json有两个主要对象，用于控制particles外观的粒子，以及用于处理所有效果的interactivity 。我们将从操纵外观开始。

粒子 (particles)

The best way to get comfortable with this is probably to just to work down the file and play around with everything.

对此最满意的最好方法可能就是简化文件并处理所有内容。

Note that here I added some comments for extra information, but you’ll want to remove those as JSON doesn’t support comments.

请注意，这里我添加了一些注释以获取更多信息，但由于JSON不支持注释，您将希望删除这些注释。

particles.json

particle.json

"particles": {
  "number": {
    "value": 50,
    "density": {
      "enable": true,
      "value_area": 700 // Denser the smaller the number.
    }
  },
  "color": { // The color for every node, not the connecting lines.
    "value": "#01579b" // Or use an array of colors like ["#9b0000", "#001378", "#0b521f"]
  },
  "shape": {
      "type": "circle", // Can show circle, edge (a square), triangle, polygon, star, img, or an array of multiple.
      "stroke": { // The border
        "width": 1,
        "color": "#145ea8"
      },
      "polygon": { // if the shape is a polygon
        "nb_sides": 5
      },
      "image": { // If the shape is an image
        "src": "",
        "width": 100,
        "height": 100
      }
  },
  "opacity": {
    "value": 0.7,
    "random": true
  },
  "size": {
    "value": 10,
    "random": true
  },
  "line_linked": {
    "enable": true,
    "distance": 200, // The radius before a line is added, the lower the number the more lines.
    "color": "#007ecc",
    "opacity": 0.5,
    "width": 2
  },
  "move": {
    "enable": true,
    "speed": 2,
    "direction": "top", // Move them off the canvas, either "none", "top", "right", "bottom", "left", "top-right", "bottom-right" et cetera...
    "random": true,
    "straight": false, // Whether they'll shift left and right while moving.
    "out_mode": "out", // What it'll do when it reaches the end of the canvas, either "out" or "bounce".
    "bounce": false, 
    "attract": { // Make them start to clump together while moving.
      "enable": true,
      "rotateX": 600,
      "rotateY": 1200
    }
  }
}

And here’s what we get using that configuration:

这就是我们使用该配置得到的结果：

See the Pen Particles JS Example #2 by Alligator.io (@alligatorio) on CodePen.

请参阅CodePen上Alligator.io( @alligatorio ) 编写的Pen Particles JS Example＃2 。

互动性 (interactivity)

The events, onhover and onclick, have 5 modes, or effects, they’ll have on the particles. Each mode is activated in the events object and configured in the modes object.

事件onhover和onclick具有5种模式或效果，它们将作用于粒子上。每个模式都在events对象中激活，并在modes对象中进行了配置。

push add more particles
push添加更多粒子
remove delete particles (only available on the onclick mode)
remove删除粒子(仅在onclick模式下可用)
grab connects lines from every node in a specific radius to your cursor (only available on the onhover mode)
grab将线从特定半径的每个节点连接到光标(仅在悬停模式下可用)
bubble node in a specific range will expand and/or change opacity
特定范围内的bubble节点将扩大和/或改变不透明度
repulse pushes all nodes away to a specific radius
repulse将所有节点推到特定半径

Things start to really get interesting when you pass multiple modes as an array.

当您将多个模式作为数组传递时，事情开始变得很有趣。

particles.json

particle.json

"interactivity": {
  "detect_on": "canvas",
  // activate
  "events": {
      "onhover": {
        "enable": true,
        "mode": [
          "grab",
          "bubble"
        ]
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
  },
  // configure
  "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.7
        }
      },
      "bubble": {
        "distance": 600,
        "size": 12,
        "duration": 1,
        "opacity": 0.8,
        "speed": 2
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 20 // How many you want added
      },
      "remove": {
        "particles_nb": 10
      }
  }
},
"retina_detect": true // No clue what this does, docs don't explain, too scared to remove. ¯\_(ツ)_/¯
}

Here’s how it looks, I tried to go for a honeycomb-like look:

这是它的外观，我尝试过像蜂窝状的外观：

See the Pen Particles JS Example #3 by Alligator.io (@alligatorio) on CodePen.

请参阅CodePen上Alligator.io( @alligatorio ) 编写的Pen Particles JS Example＃3 。

✨ While particles.js may not have a place in your daily arsenal of frameworks and libraries, it is undoubtedly a very simple tool for quickly jazzing up any landing page with jaw-dropping effects.

particles虽然particles.js可能在您的日常框架和库中不占一席之地，但它无疑是一个非常简单的工具，可以通过令人landing目结舌的效果快速使任何着陆页面更加迷人。

翻译自: https://www.digitalocean.com/community/tutorials/js-background-effects-particlesjs

particles.js

particles.js_使用Particles.js创建很棒的背景效果

安装 (Installation)

档案设定 (File Setup)

app.js (app.js)

默认配置 (Default Configuration)

组态 (Configuration)

粒子 (particles)

互动性 (interactivity)

相关阅读

相关文章

相关问答

相关文档