Heim > Web-Frontend > js-Tutorial > JS-Bibliothek Particles.js Chinesisches Entwicklungshandbuch

JS-Bibliothek Particles.js Chinesisches Entwicklungshandbuch

巴扎黑
Freigeben: 2017-09-15 09:18:48
Original
2522 Leute haben es durchsucht

Da ich Produkte herstellen muss, ist eine gute Benutzeroberfläche auch sehr wichtig. Ich fand, dass diese Art von Spezialeffekt für die Streuung von Atompartikeln ziemlich gut ist. Heute hat der Herausgeber von Script House das chinesische Entwicklungshandbuch von Particles.js und die Parameter von Particles.js mit allen geteilt. Freunde, die es benötigen, können darauf zurückgreifen.

Da ich Produkte erstellen muss, ist dies auch eine gute Benutzeroberfläche Sehr wichtig. Ich fand, dass dieser Spezialeffekt für die Streuung von Atomteilchen ziemlich gut ist, also habe ich einen

offiziellen Github erstellt: https://github.com/VincentGarreau/particles.js/

Demo-Ersteller, bitte beachten Sie, dass Sie möglicherweise FQ benötigen

https://codepen.io/VincentGarreau/pen/pnlso Damit kann die von Ihnen erstellte Demo exportiert werden

http://vincentgarreau.com /particles.js/Hiermit kann versucht werden, verschiedene Effekte zu konfigurieren

Verwendung

particle.js laden und Partikel konfigurieren:

index.html


<p id="particles-js"></p>
<script src="particles.js"></script>
Nach dem Login kopieren

app.js


/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
 console.log('callback - particles.js config loaded');
});
Nach dem Login kopieren

particles.json ist das Hauptkonfigurationsdatei

Achten Sie auf die Reihenfolge der Dateien, sonst kann es zu Problemen kommen

Eigentliche Demo


<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>particles.js</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<p id="particles-js"></p>
</body>
 <script src=&#39;particles.min.js&#39;></script> 这个玩意需要放在下面
 <script src="index.js"></script>
</html>
Nach dem Login kopieren

Bei Bedarf herunterladen. Bitte besuchen Sie die QQ-Gruppe für eine Demo. Der Black-Atom-Effekt ist sehr Science-Fiction, nicht schlecht.

Gemäß der CSS-Farb- und JSON-Konfigurationsdatei können Sie Ihre erstellen eigener Science-Fiction-Effekt

Parameter

particles.opacity.anim.speedparticles.opacity.anim.opacity_min Zahl (0 bis 1) Deckkraft der Verlaufsanimation20boolean Zufällige Atomgrößetrue / particles.size.anim.size_minparticles.size.anim.syncfalsch150HEX (Zeichenfolge) Farbe der verknüpften LinieZeichenfolge (außerhalb der Leinwand) Ob aus der Leinwand heraus verschoben werden soll Zahl Anziehung
Schlüsselwert Parameteroptionen/-beschreibung Instanz
<span style="color:#111111;font-family:NSimsun">particles.number.value</span> Zahlenmenge <span style="color:#111111;font-family:NSimsun">40</span>
<span style="color:#111111;font-family:NSimsun">particles.number.density.enable</span> Boolescher Wert <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">falsch</span>
particles.number.density.value_area<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.number.density.value_area</span> number   区域散布密度大小 <span style="color:#111111;font-family:NSimsun">800<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">800</span>
<span style="color:#111111;font-family:NSimsun">particles.color.value</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.color.value</span>

HEX (Zeichenfolge) 
     RGB (Objekt) 
     HSL (Objekt) 
     Array-Auswahl (HEX) 
     zufällig (Zeichenfolge)

原子的颜色

<span style="color:#111111;font-family:NSimsun">"#b61924"</span>
<span style="color:#111111;font-family:NSimsun">{r:182, g:25, b:36}</span>
<span style="color:#111111;font-family:NSimsun">{h:356, s:76, l:41}</span>
<span style="color:#111111;font-family:NSimsun">["#b61924", "#333333", "999999"]</span>
<span style="color:#111111;font-family:NSimsun">"random"</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.type</span> Zeichenfolge
Array-Auswahl Die Form des Atoms
<span style="color:#111111;font-family:NSimsun">"circle"</span>
<span style="color:#111111;font-family:NSimsun">"edge"</span>
<span style="color:#111111;font-family:NSimsun">"triangle"</span>
<span style="color:#111111;font-family:NSimsun">"polygon"</span>
<span style="color:#111111;font-family:NSimsun">"star"</span>
<span style="color:#111111;font-family:NSimsun">"image"</span>
<span style="color:#111111;font-family:NSimsun">["circle", "triangle", "image"]</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.stroke.width</span> Zahl Breite des Prinzips <span style="color:#111111;font-family:NSimsun">2</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.stroke.color</span> HEX (String) Atomfarbe <span style="color:#111111;font-family:NSimsun">"#222222"</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.polygon.nb_slides</span> Zahl Anzahl der Polygonseiten von das Atom <span style="color:#111111;font-family:NSimsun">5</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.image.src</span> Pfadlink
SVG / PNG / GIF / JPG Atom-Bilder können benutzerdefinierte Bilder
<span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span>
<span style="color:#111111;font-family:NSimsun">"http://mywebsite.com/assets/img/yop.png"</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.image.width</span> Nummer verwenden
(für Seitenverhältnis) Bildbreite
<span style="color:#111111;font-family:NSimsun">100</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.image.height</span> Anzahl
(für Seitenverhältnis) Bildhöhe
<span style="color:#111111;font-family:NSimsun">100</span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.value</span> Zahl (0 bis 1) Deckkraft <span style="color:#111111;font-family:NSimsun">0.75</span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.random</span> boolean Zufällige Deckkraft <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.enable</span> Boolesche Verlaufsanimation <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">falsch</span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.speed</span> <span style="color:#111111;font-family:NSimsun">3</span>Anzahl             Gradientenanimationsgeschwindigkeit
3<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.opacity_min</span> <span style="color:#111111;font-family:NSimsun">0.25</span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.sync</span> <span style="color:#111111;font-family:NSimsun">true</span>0,25<span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun"></span>particles.opacity . anim.syncbooleantrue / false particles.size.value Anzahl Atomgröße <span style="color:#111111;font-family:NSimsun">20</span>
<span style="color:#111111;font-family:NSimsun">particles.size.random</span> Teilchen .size.random<span style="color:#111111;font-family:NSimsun">true</span><span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">particles.size.anim.enable</span> <span style="color:#111111;font-family:NSimsun">true</span>false<span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">particles.size.anim.speed</span> particles.size.anim.enable <span style="color:#111111;font-family:NSimsun">boolescher atomarer Gradient</span>wahr / falschparticles.size.anim. GeschwindigkeitZahl Atomgradientengeschwindigkeit3
<span style="color:#111111;font-family:NSimsun">particles.size.anim.size_min</span> <span style="color:#111111;font-family:NSimsun">0.25</span>Anzahl
0,25<span style="color:#111111;font-family:NSimsun">particles.size.anim.sync</span> <span style="color:#111111;font-family:NSimsun">true</span><span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">particles.line_linked.enable</span>boolean wahr<span style="color:#111111;font-family:NSimsun">true</span><span style="color:#111111;font-family:NSimsun">false</span> / 
<span style="color:#111111;font-family:NSimsun"></span>Partikel .line_linked.enableboolean       连接线true / falseparticles.line_linked.distance Anzahl Verbindungslinienabstand <span style="color:#111111;font-family:NSimsun">150</span>
<span style="color:#111111;font-family:NSimsun">particles.line_linked.color</span> Partikel.line_linked.color<span style="color:#111111;font-family:NSimsun">#ffffff</span>
<span style="color:#111111;font-family:NSimsun">particles.line_linked.opacity</span> #ffffff <span style="color:#111111;font-family:NSimsun">0.5</span>
<span style="color:#111111;font-family:NSimsun">particles.line_linked.width</span>particles.line_linked.opacity Zahl (0 bis 1) Verknüpfte Linienopazität <span style="color:#111111;font-family:NSimsun"></span> 0,5particles.line_linked.widthZahl Die Breite der Verbindungslinie1,5
particles.move.enable<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.move.enable</span> boolean     原子移动 <span style="color:#111111;font-family:NSimsun">true</span><span style="color:#111111;font-family:NSimsun">true</span> / false<span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">particles.move.speed</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.move.speed</span> number     原子移动速度 <span style="color:#111111;font-family :NSimsun">4</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">4</span>
<span style="color:#111111;font-family:NSimsun">particles.move.direction</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.move.direction</span> string             原子移动方向 <span style="color:#111111;font-family:NSimsun">"none"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"none"</span> 
<span style="color:#111111;font-family:NSimsun">"top"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"top"</span> 
<span style="color:#111111;font-family:NSimsun">"top-right"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"top-right"</span> 
<span style="color:#111111;font-family:NSimsun">"right"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"right"</span> 
<span style="color:#111111;font-family:NSimsun">"bottom-right"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"bottom-right"</span> 
<span style="color:#111111;font-family:NSimsun">"bottom"</span>
<span style="color:#111111;font-family:NSimsun">"bottom-left"</span> 🎜>
/ 🎜><span style="color:#111111;font-family:NSimsun">"left"</span>
<span style="color:#111111;font-family:NSimsun">"top-left"</span>
<span style="color:#111111;font-family:NSimsun">"out"</span>
<span style="color:#111111;font-family:NSimsun">"bounce"</span>
<span style="color:#111111;font-family:NSimsun">particles.move.bounce</span> boolean
(zwischen Partikeln) Ob man springen und sich bewegen soll?
<span style="color:#111111;font-family:NSimsun">true</span> / 🎜><span style="color:#111111;font-family:NSimsun">false</span> /
<span style="color:#111111;font-family:NSimsun">particles.move.attract.enable</span> 1500<span style="color:#111111;font-family:NSimsun">true</span>
interactivity.detect_on<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.detect_on</span> string        原子之间互动检测 <span style="color:#111111;font-family:NSimsun">"canvas", Fenster"</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">"canvas", "window"</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.enable</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.enable</span> boolean    悬停 true<span style="color:#111111;font-family:NSimsun">true</span> / false<span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.mode</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.mode</span>

string 
     Array-Auswahl

悬停模式 

<span style="color:#111111;font-family:NSimsun">"grab"</span> In der Nähe greifen
<span style="color:#111111;font-family:NSimsun">"bubble"</span> Schaumballeffekt
<span style="color:#111111;font-family:NSimsun">"repulse"</span> Rückstoßeffekt
<span style="color:#111111;font-family:NSimsun">["grab", "bubble"]</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.enable</span> boolescher Klickeffekt <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.mode</span>

Zeichenfolge
Array-Auswahl

Klicken Sie auf den Effektmodus

<span style="color:#111111;font-family:NSimsun">"push"</span> 
<span style="color:#111111;font-family:NSimsun">"remove"</span> 
<span style="color:#111111;font-family:NSimsun">"bubble"</span> 
<span style="color:#111111;font-family:NSimsun">"repulse"</span> 
<span style="color:#111111;font-family:NSimsun">["push", "repulse"]</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.resize</span> boolean Interaktive Ereignisanpassung <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.distance</span> Zahl Atomische Wechselwirkungsreichweite <span style="color:#111111;font-family:NSimsun">100</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.line_linked.opacity</span> Zahl ( 0 zu 1) Atomic Interaction Grab Distance Connection Opacity <span style="color:#111111;font-family:NSimsun">0.75</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.distance</span> Zahl Der Abstand zwischen atomaren Greifblaseneffekten <span style="color:#111111;font-family:NSimsun">100</span><span style="color:#111111;font-family:NSimsun">100</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events .modes .bubble.size</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.size</span> Zahl Die Größe zwischen atomaren Greifblaseneffekten <span style="color:#111111;font-family:NSimsun">40</span><span style="color:#111111;font-family:NSimsun">40</span>
<span style="color:#111111; Schriftfamilie: NSimsun">interactivity.events.modes.bubble.duration</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.duration</span> Anzahl kontinuierlicher Ereignisse zwischen atomaren Greifblaseneffekten
(Sekunde)
<span style="color:#111111;font-family:NSimsun">0.4</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.repulse.distance</span> Anzahl Rückstoßeffektentfernung <span style="color:#111111;font-family:NSimsun">200</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.repulse.duration</span> Kontinuierliches Ereignis mit Zahlen-Knockback-Effekt
(zweite)
<span style="color:#111111;font-family:NSimsun">1.2</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span> Zahl Die Anzahl der abgefeuerten Partikel <span style="color:#111111;font-family:NSimsun">4</span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span> Nummer <span style="color:#111111;font-family:NSimsun">4</span>
<span style="color:#111111;font-family:NSimsun">retina_detect</span> boolean <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>

Das obige ist der detaillierte Inhalt vonJS-Bibliothek Particles.js Chinesisches Entwicklungshandbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage