Particles.js implementiert eine partikeldynamische Hintergrundanimation

Dieses Mal werde ich Ihnen Particles.js zur Implementierung einer partikeldynamischen Hintergrundanimation vorstellen. Was sind die Vorsichtsmaßnahmen für Particles.js zur Implementierung einer partikeldynamischen Hintergrundanimation? .

Betriebsprozess:

Es gibt einen grundlegenden Prozess im Internet, auf den Sie sich beziehen können. Wenn er jedoch direkt auf der Anmeldeseite verwendet wird, treten kleine Fehler auf und müssen angepasst werden.

1. Fügen Sie zunächst die Datei „particles.js“ in die Seite ein.

<script src="js/particles.js"></script>

2. Verwenden Sie ein p auf der Seite als Container zum Platzieren von Partikeln. [Normalerweise unten platziert, CSS muss verbessert werden]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3. Laden Sie die

Konfigurationsdatei : Wenn Sie laut Internet die Methode Load () verwenden, müssen Sie eine Konfigurations-JSON-Datei abrufen, und der Lichtpfad wird mich verkrüppeln.

                                            Sehen Sie sich die offizielle Demo an: http://codepen.io/VincentGarreau/pen/pnlso

Schreiben Sie die Konfiguration direkt in JS

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "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": 0.5,
   "random": false,
   "anim": {
    "enable": false,
    "speed": 1,
    "opacity_min": 0.1,
    "sync": false
   }
  },
  "size": {
   "value": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "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": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4. Konfigurieren Sie die Parameteroption und verwenden Sie: Die offizielle Seite der Option Github enthält Details. Kontrollieren Sie die Anzahl der Partikel, ihre Bewegungsgeschwindigkeit usw.

Es gibt immer noch Probleme bei der Verwendung von Partikeln. Nachdem Sie die Datei in Chrome heruntergeladen und dann zu dieser Seite gewechselt haben, wird sie deaktiviert. Warten Sie auf eine Lösung.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Routing-Metainformationen des Vue-Routers

Wie man die Partikel verwendet .js-Bibliothek in vue Verwenden Sie

Das obige ist der detaillierte Inhalt vonParticles.js implementiert eine partikeldynamische Hintergrundanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!