Einführung in die nutzungsbezogenen Inhalte von PartikelJS-js-Tutorial-php.cn

Einführung in die nutzungsbezogenen Inhalte von PartikelJS

jacklove

Freigeben： 2018-06-15 15:15:15

Original

1496 Leute haben es durchsucht

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 die Renderings:
Standardversion:

Einführung in die nutzungsbezogenen Inhalte von PartikelJS

Sternenhimmel-Version:
Einführung in die nutzungsbezogenen Inhalte von PartikelJS
Blasenversion:

Schneeversion:

Das können wir nutzen. Was zu tun ist ?
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:
Einführung in die nutzungsbezogenen Inhalte von PartikelJS

oder

Einführung in die nutzungsbezogenen Inhalte von PartikelJS

Nun, die Wirkung ist ganz gut.
Also, hier erfahren Sie, wie Sie particles.js verwenden.

particlesJS Open Source auf Github: https://github.com/VincentGarreau/particles.js

Eine Demo wird in diesem Projekt bereitgestellt. Sie können dieses Projekt direkt herunterladen und öffnen Demo-Datei index.html, Sie können den Effekt 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"></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

particles.js ist seine Bibliothek, wir müssen sie importieren, app.js ist die Parameterkonfigurationsdatei, wir müssen sie auch importieren, aber stats.js in der Demo existiert nicht. Einführung erforderlich.
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 Funktionscodeblock zu kapseln Wir wollen implementieren und die absolute Positionierung für dieses p in CSS festlegen.

Im Folgenden wird die Verwendung der Parameterkonfigurationsdatei app.js vorgestellt:

particles.number.value: Anzahl der Partikel

particles.number.density: Partikeldichte

particles.number.density.enable: Partikeldichte aktivieren (wahr oder falsch)

particles.number.density.value_area: Von jedem Partikel eingenommener Platz (nur verfügbar, wenn die Partikeldichte aktiviert ist)

particles.color.value: Farbe der Partikel (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 um die Partikelgeschwindigkeit zu aktivieren (wahr/falsch)

particles.size.anim.speed: Häufigkeit der Partikelanimation

particles.size.anim.sync: Ob die Partikellaufgeschwindigkeit und die Animation synchronisiert sind

particles.move.speed : Partikelbewegungsgeschwindigkeit

Sie können Ihren bevorzugten Hintergrund basierend auf diesen Konfigurationsdateien konfigurieren. Unten finden Sie zwei vollständige Konfigurationsdateien. app.js Konfigurationsdatei 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}

Nach dem Login kopieren

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}

Nach dem Login kopieren

Dieser Artikel erklärt die Verwendung von PartikelnJS Einführung zu verwandten Inhalten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Detaillierte Analyse der Operatoren i++ und ++i in JS

Bootstrap+jq+jqajax + PHP+ Datenbank hinzufügen, löschen, ändern, Quellcode prüfen

Die Warenkorbfunktion wird durch PHP+MySQL+jQuery+Ajax realisiert

Das obige ist der detaillierte Inhalt vonEinführung in die nutzungsbezogenen Inhalte von PartikelJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!