So verwenden Sie die Particles.js-Bibliothek in Vue

Dieses Mal zeige ich Ihnen, wie Sie die Particles.js-Bibliothek in Vue verwenden einmal einen Blick. Die Partikelanimation auf der Rückseite von Zhihus Homepage schien immer cool zu sein. Nachdem ich sie durchsucht hatte, stellte ich fest, dass sie mit „particles.js“ geschrieben wurde. Zufälligerweise verwendet das aktuelle Projekt das Vue-Framework, also haben die beiden es gemeinsam gelernt.

Um ehrlich zu sein: Wenn dies gut genutzt wird, kann die Seite sehr cool sein, wie zum Beispiel das Projekt, an dem ich gerade schreibe

Hehe~

Partikel.js installieren

npm install --save particles.js

Partikel.js konfigurieren

1.data Diese Daten werden verwendet, um den Zustand der Partikel auf der Seite zu steuern.

{
"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
}

2.Vorlage Hier werden die dynamischen Partikel angezeigt.

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

3.script Da es sich um den DOM-Baum handelt, muss „particles.js“ nach Abschluss der Bereitstellung initialisiert werden. Die erste Parameter-ID ist der ID-Name, den Sie auf der Vorlage erhalten. Wenn ich ihn schreiben möchte, handelt es sich um Partikel. Der zweite Parameter ist der Pfad, in dem Ihre Daten gespeichert sind. Ich persönlich empfehle die Verwendung relativer Pfade.

mounted(){
 particlesJS.load('id','path to your particles.data');
}

4.Stil

An dieser Stelle werden Sie feststellen, dass es einen sehr wichtigen Punkt gibt, der noch nicht erwähnt wurde, nämlich die Einführung von Partikeln.js. Wenn Ihr Nutzungsbereich relativ klein ist, können Sie ihn direkt in das Skript der aktuellen Vue-Datei einfügen, d. h.

#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

Oder vielleicht denken Sie, dass dies schwierig zu handhaben ist, also müssen Sie es in die Hauptdatei einfügen.

//vue文件
import particles from 'particles.js'

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

//main文件
import particles from 'particles.js'
Vue.use(particles)

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Three.js

Detaillierte Erklärung der Verwendung von Angular CLI

Detaillierte Erläuterung der Schritte zum Umblättern im Vollbildmodus für die Fullpage-Plug-in-Entwicklung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Particles.js-Bibliothek in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!