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:453258Durchsuche
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!