Ausführliche Erläuterung der Verwendung von ParticlesJS

Dieses Mal werde ich Ihnen die Verwendung von ParticlesJS ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von ParticlesJS?

particles.js

Eine leichte JavaScript-Bibliothek zum Erstellen von Partikeln.

Eine leichte JavaScript-Bibliothek zum Erstellen von Partikelhintergründen

Hier erfahren Sie, wie Sie „particles.js“ verwenden.

PartikelJS ist Open Source auf Github: https://github.com/VincentGarreau/particles.js

In diesem Projekt wird eine Demo bereitgestellt. Sie können dieses Projekt direkt herunterladen und die Datei index.html in der Demo öffnen, um den Effekt zu sehen.

Wenn wir also unser eigenes Projekt erstellen möchten, wie importieren wir die Dateien?

Die Vorschläge lauten wie folgt:

nbsp;html>


 <meta>
 <title>particles.js</title>
 <meta>
 <meta>
 <meta>
 <link>


<p></p>
<!-- scripts -->
<script></script>
<script></script>

„particles.js“ ist seine Bibliothek, wir müssen sie importieren, „app.js“ ist der Parameter Konfigurationsdatei , wir müssen ihn ebenfalls importieren, aber es besteht keine Notwendigkeit, stats.js in der Demo zu importieren.

Wir können auch style.css einführen, die Hintergrundfarbe wird in CSS festgelegt.

Basierend auf dieser Vorlage können wir die Funktionen hinzufügen, die wir implementieren möchten, z. B. Registrierungs- und Anmeldefunktionen. Folgendes ist zu beachten:
Verwenden Sie p, um den Funktionscodeblock zu kapseln, den wir implementieren möchten, und legen Sie dieses p fest css Absolute Positionierung.

Im Folgenden wird die Verwendung der Parameterkonfigurationsdatei app.js vorgestellt:

Partikel.Anzahl.Wert: Anzahl der Partikel

„particles.number.density“: Die Dichte von Partikeln

Partikel.Nummer.Density.enable: Aktiviert die Dichte von Partikeln (wahr oder falsch)

„particles.number.density.value_area“: Der von jedem Partikel eingenommene Platz (nur verfügbar, wenn die Partikeldichte aktiviert ist)

Partikel.Farbe.Wert: Die Farbe von Partikeln (unterstützt hexadezimal „#b61924“, rgb „{r:182, g:25, b:36}“, hsl und zufällig)

„particles.shape.type“: Die Form der Partikel („Kreis“, „Kante“, „Dreieck“, „Polygon“, „Stern“ „Bild“)

Partikel.opacity.value: Transparenz von Partikeln

Partikel.size.anim.enable: Ob die Partikelgeschwindigkeit aktiviert werden soll (wahr/falsch)

Partikel.size.anim.speed: Häufigkeit der Partikelanimation

Partikel.size.anim.sync: Ob die Partikellaufgeschwindigkeit und die Animation synchronisiert sind

Partikel.move.speed: Partikelbewegungsgeschwindigkeit

Sie können Ihren bevorzugten Hintergrund basierend auf diesen Konfigurationsdateien konfigurieren. Nachfolgend finden Sie zwei vollständige Konfigurationsdateien app.js.

Profil 1 (klassischer Hintergrund):

{
 "particles": {
 "number": {
  "value": 80,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "polygon",
  "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": 6,
  "direction": "none",
  "random": false,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "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": 8,
  "speed": 3
  },
  "repulse": {
  "distance": 200,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": false
}

Konfigurationsdatei zwei (Sternenhimmel-Hintergrund):

{
 "particles": {
 "number": {
  "value": 160,
  "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": 1,
  "random": true,
  "anim": {
  "enable": true,
  "speed": 1,
  "opacity_min": 0,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 4,
  "size_min": 0.3,
  "sync": false
  }
 },
 "line_linked": {
  "enable": false,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 1,
  "direction": "none",
  "random": true,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 600
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "bubble"
  },
  "onclick": {
  "enable": true,
  "mode": "repulse"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 250,
  "size": 0,
  "duration": 2,
  "opacity": 0,
  "speed": 3
  },
  "repulse": {
  "distance": 400,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": true
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von ParticlesJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!