Vue で Particles.js ライブラリを使用する方法

今回は、vue で Particles.js ライブラリを使用する方法を説明します。vue で Particles.js ライブラリを使用する際の 注意事項 について、実際のケースを見てみましょう。

Zhihu のホームページの後ろにあるパーティクル アニメーションがいつもクールだと思っていましたが、調べてみると、particles.js を使用して書かれていることがわかりました。たまたま現在のプロジェクトで Vue フレームワークが使用されているため、2 人は一緒に Vue フレームワークを学びました。

正直、これをうまく使えば、今書いているプロジェクトのような、とてもカッコいいページになります

へへ〜

particles.jsをインストールする

npm install --save particles.js

particles.jsを設定する

1.データ

このデータは、ページ内のパーティクルの状態を制御するために使用されます。

りー

2.テンプレート

ここにダイナミック パーティクルが表示されます。

りー

3.スクリプト

DOM ツリーが関与するため、マウントが完了した後、particles.js を初期化する必要があります。最初のパラメータ id は、テンプレートで取得した ID 名です。これを書きたい場合は、パーティクルです。 2 番目のパラメーターは、データが保存されているパスです。個人的には相対パスを使用することをお勧めします。

りー

4.stylerreee

この時点で、まだ言及されていない最も重要な点が 1 つあることがわかります。それは、particles.js の導入です。使用範囲が比較的小さい場合は、現在の vue ファイルのスクリプトに直接導入できます。つまり、

{
"particles": {
 "number": {
 "value": 60,
 "density": {
  "enable": true,
  "value_area": 800
 }
 },
 "color": {
 "value": "#ffffff"
 },
 "shape": {
 "type": "circle",
 "stroke": {
  "width": 0,
  "color": "#000000"
 },
 "polygon": {
  "nb_sides": 5
 },
 "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
 }
 },
 "opacity": {
 "value": 0.5,
 "random": false,
 "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
 }
 },
 "size": {
 "value": 3,
 "random": true,
 "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
 }
 },
 "line_linked": {
 "enable": true,
 "distance": 150,
 "color": "#ffffff",
 "opacity": 0.4,
 "width": 1
 },
 "move": {
 "enable": true,
 "speed": 4,
 "direction": "none",
 "random": false,
 "straight": false,
 "out_mode": "out",
 "bounce": false,
 "attract": {
  "enable": false,
  "rotateX": 100,
  "rotateY": 1200
 }
 }
},
"interactivity": {
 "detect_on": "Window",
 "events": {
 "onhover": {
  "enable": true,
  "mode": "grab"
 },
 "onclick": {
  "enable": true,
  "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
  "distance": 140,
  "line_linked": {
  "opacity": 1
  }
 },
 "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
 },
 "repulse": {
  "distance": 200,
  "duration": 0.4
 },
 "push": {
  "particles_nb": 4
 },
 "remove": {
  "particles_nb": 2
 }
 }
},
"retina_detect": true
}

あるいは、これは管理が難しいので、メイン ファイルに入れる必要があると思われるかもしれません

<p id="particles"></p>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

推奨読書:

Three.jsの使用方法の詳細な説明

angular cliの使用方法の詳細な説明

フルページプラグイン開発の全画面ページめくり手順の詳細な説明

以上がVue で Particles.js ライブラリを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。