Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung von ParticlesJS

Ausführliche Erläuterung der Verwendung von ParticlesJS

php中世界最好的语言Original: 2018-04-17 16:53:453331Durchsuche

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:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>particles.js</title>
 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
 <meta name="author" content="Vincent Garreau" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" >
</head>
<body>
<p id="particles-js"></p>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</body>
</html>

„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!

php JavaScript css html edge for 封装 JS number github https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Generieren Sie Zahlen basierend auf der WahrscheinlichkeitNächster Artikel：Generieren Sie Zahlen basierend auf der Wahrscheinlichkeit

In Verbindung stehende Artikel

Mehr sehen