So verwenden Sie die Particles.js-Bibliothek in Vue-js-Tutorial-php.cn

So verwenden Sie die Particles.js-Bibliothek in Vue

php中世界最好的语言

Freigeben： 2018-04-17 11:14:15

Original

2456 Leute haben es durchsucht

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
}

Nach dem Login kopieren

2.Vorlage Hier werden die dynamischen Partikel angezeigt.

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

Nach dem Login kopieren

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');
}

Nach dem Login kopieren

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%;
}

Nach dem Login kopieren

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'

Nach dem Login kopieren

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)

Nach dem Login kopieren

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!