Heim > Artikel > Web-Frontend > Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek
Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek
- 巴扎黑Original
- 2017-09-13 09:31:181913Durchsuche
ParticlesJS ist eine leichte JavaScript-Bibliothek zum Erstellen von Partikelhintergründen. Als nächstes werde ich Ihnen in diesem Artikel eine Einführung in die Verwendung der JS-Bibliothek ParticlesJS geben.
particles.js
Eine leichte JavaScript-Bibliothek zum Erstellen von Partikeln.
Eine leichte JavaScript-Bibliothek zum Erstellen von Partikelhintergründen
Werfen wir zunächst einen Blick auf das Rendering: Ausgabe:
Sternenhimmel-Edition:
Blasenversion:
Schneeversion:
Was können wir damit machen?
Ich denke, das eignet sich besser für Seiten ohne Hintergrund, oder wenn Sie kein passendes Bild als Hintergrund finden, können wir alle das verwenden.
Zum Beispiel:
oder
Nun, die Wirkung ist ziemlich gut.
Hier erfahren Sie, wie Sie „particles.js“ verwenden.
particlesJS ist Open Source auf Github: https://github.com/VincentGarreau/particles.js
In diesem Projekt wird eine Demo bereitgestellt. Sie können das Projekt direkt herunterladen und den Index öffnen in der demo.html-Datei, um den Effekt zu sehen.
Wenn wir also unser eigenes Projekt erstellen möchten, wie importieren wir dann 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>
style.css Wir können auch vorstellen, dass die Hintergrundfarbe in CSS festgelegt wird.
Basierend auf dieser Vorlage können wir die Funktionen hinzufügen, die wir implementieren möchten, z. B. die Registrierungs- und Anmeldefunktion. Folgendes ist zu beachten:
Verwenden Sie p, um den gewünschten Funktionscodeblock zu kapseln implementieren und in CSS die absolute Positionierung für dieses p festlegen.
Im Folgenden wird die Verwendung der Parameterkonfigurationsdatei app.js vorgestellt:
particles.number.value: die Anzahl der Partikel
particles.number.density: die Dichte von Partikeln
particles.number.density.enable: Aktiviert die Dichte von Partikeln (wahr oder falsch)
particles.number.density.value_area: Der von jedem Partikel eingenommene Raum (aktiviert Partikel). Dichte, nur verfügbar)
particles.color.value: 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“)
particles.opacity.value: Die Transparenz der Partikel
particles.size.anim.enable: Ob die Partikelgeschwindigkeit aktiviert werden soll (wahr/falsch)
particles.size.anim.speed: Häufigkeit der Partikelanimation
particles.size.anim.sync: Ob die Partikellaufgeschwindigkeit mit der Animation synchronisiert ist
particles.move.speed: Die Partikelbewegungsgeschwindigkeit
Sie können Ihren bevorzugten Hintergrund basierend darauf konfigurieren Diese Konfigurationsdateien werden unten bereitgestellt. Vollständige Konfigurationsdatei app.js.
Profil eins (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
}{
"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
}Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!