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

JS-Bibliothek Particles.js Chinesisches Entwicklungshandbuch

巴扎黑Original: 2017-09-15 09:18:482483Durchsuche

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>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load(&#39;particles-js&#39;, &#39;assets/particles.json&#39;, function() {
 console.log(&#39;callback - particles.js config loaded&#39;);
});

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>

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

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!

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：Einführung in den Code zur Verwendung von Particles.js zum Erstellen atemberaubender partikeldynamischer Hintergrundeffekte, die Zhihu imitierenNächster Artikel：Einführung in den Code zur Verwendung von Particles.js zum Erstellen atemberaubender partikeldynamischer Hintergrundeffekte, die Zhihu imitieren

In Verbindung stehende Artikel

Mehr sehen

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>`