Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek-js-Tutorial-php.cn

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek

巴扎黑

Freigeben： 2017-09-13 09:31:18

Original

2013 Leute haben es durchsucht

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:

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek Sternenhimmel-Edition:

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek Blasenversion:

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek Schneeversion:

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek 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:

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek oder

Eine kurze Einführung in die Verwendung von ParticlesJS mit der JS-Bibliothek 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:

particles.js ist seine Bibliothek, wir müssen sie einführen, app.js ist die Parameterkonfigurationsdatei Wir müssen es auch importieren, aber in der Demo ist es nicht erforderlich, stats.js zu importieren.

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

Nach dem Login kopieren

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):

Profil zwei (Sternenhimmel-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
}

Nach dem Login kopieren

{
 "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
}

Nach dem Login kopieren

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!