序章

Particles.js は、パーティクルエフェクトを作成できるライブラリです。 これらは、物理学と双方向性のいくつかの動作を観察する機能を備えたキャンバスに描画される形状とオブジェクトです。 これは、イラストや写真を必要とせずに人目を引く背景を作成するのに役立ちます。

注：元のリポジトリの開発が停滞しているようです。 tsParticlesという名前のフォークが最近作成されました。 このチュートリアルの内容は、この新しいフォークを使用するように更新されました。

このチュートリアルでは、このライブラリのいくつかの機能と、サンプル構成のロードと変更について簡単に紹介します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • 最新のWebブラウザ。
  • JSONに精通していると、構成ファイルを理解するのに役立つ場合があります。 JSONの概要を参照してください。

ステップ1—プロジェクトの設定

チュートリアルの目的で、この例では、ローカルのindex.htmlファイルと、コンテンツ配信ネットワーク（CDN）によってホストされるtsParticlesライブラリのコピーに焦点を当てます。

ターミナルウィンドウで、新しいプロジェクトディレクトリを作成します。

  1. mkdir tsparticles-example

次に、新しいプロジェクトディレクトリに移動します。

  1. cd tsparticles-example

次に、index.htmlファイルを作成します。

index.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>

ライブラリには、キャンバスをフックするためのdivとidが必要です。 新しい<div id="tsparticles">をbodyに追加します。

index.html
<body>
 <div id="tsparticles"></div>
</body>

次に、CDNでホストされているライブラリをbodyに追加します。

index.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 is also available via npm:

  1. npm install tsparticles

次に、フックするid（この場合はtsparticles）を指定して、tsParticlesを初期化します。

index.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>

Webブラウザでindex.htmlにアクセスすると、Webページ全体にランダムに散らばっているいくつかの粒子を観察する必要があります。 この時点までのすべてが期待どおりに機能していることを確認し、カスタムオプションの追加に進むことができます。

ステップ2—構成をロードする

ライブラリのドキュメントには、利用可能なオプションの多くがリストされています。 これらには、background、interactivity、particlesなどが含まれます。

まず、 default.json をコピーして、particlesとして貼り付けます。

index.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>

Webブラウザでindex.htmlにアクセスするときは、線で接続され、画面を横切る小さな円を観察する必要があります。

ステップ3—構成のカスタマイズ

tsParticlesで使用可能なオプションは相互作用し、相互に影響します。 値を調整して実験し、それらがパーティクルにどのように影響するかを確認する必要があります。

前に定義したparticlesを使用して、次のように構成の値を変更できます。

index.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を円から六角形（6辺のポリゴン）に変更します。 ポリゴンのnumberとsizeが変更されました。 リンクされた行が削除されました。 directionがnoneからbottomに変更されました。

Webブラウザでindex.htmlにアクセスすると、ページの下にカスケードする金色の六角形を観察する必要があります。

構成の実験

ライブラリが提供する可能性をより広く理解するために、tsParticlesサイトで入手可能なさまざまなサンプルを見ることができます。

ドロップダウンを使用して、興味深いサンプルを選択します。 このページのエディターを使用して、値を変更できます。 次に、リロードをクリックして変更を確認します。

変更をエクスポートする場合は、その他をクリックしてから、構成のエクスポートをクリックします。 これにより、構成がJSON形式で表示されます。

注：これらのデモの一部では、追加の依存関係が必要になる場合があります。 たとえば、FontAwesomeサンプルにはFontAwesomeライブラリが必要です。

これらの新しい構成をindex.htmlの以前のparticle変数に割り当て、Webブラウザーでページを更新するのに時間をかけます。

結論

このチュートリアルでは、tsParticlesライブラリ（以前のParticles.js）をローカルで使用する方法を学習しました。

tsParticlesは目を引く背景に使用できます。 ただし、ブラウザのサポート、低速のネットワークでの読み込み時間、および低速のコンピュータでのパフォーマンスに関する考慮事項を検討する必要がある場合があります。

JavaScriptについて詳しく知りたい場合は、JavaScriptトピックページで演習とプログラミングプロジェクトを確認してください。