So erstellen Sie eine Willkommensseite mit React Particles.js

Blog

So erstellen Sie eine Willkommensseite mit React Particles.js

Ich habe mich immer gefragt, wie Websites diese coolen, bewegenden, konstellationsähnlichen Hintergründe geschaffen haben. Nach einigem Graben entdeckte ich |_+_|, eine React-ifizierte Version des Leichtgewichts tsPartikel Bibliothek zum Erstellen von Partikeleffekten. tsParticles ist eine TypeScript-Bibliothek, die auf Particles.js basiert. Es bietet die gleichen Funktionen wie Particles.js, verpackt sie jedoch gut in Komponenten für einige der beliebtesten Frameworks, einschließlich der |_+_| Komponente, die wir unten in unserem React-Projekt verwenden werden.

Diese Bibliotheken fügen Ihrem Projekt zwar nicht unbedingt Funktionen hinzu, machen es jedoch optisch ansprechender. Erstellen wir eine Willkommensseite mit dem |_+_| Komponente aus |_+_|, einige grundlegende CSS und eine SVG. Als erstes müssen wir eine neue React-App erstellen, indem wir|_+_| . ausführen in der Befehlszeile, dann cd in den neu erstellten Ordner. Wenn Sie dies als Teil einer tatsächlichen Anwendung verwenden, möchten Sie diese Willkommensseite in einer eigenen Datei haben, aber für dieses einfache Projekt erstellen und definieren wir unsere Partikelparameter in |_+_|. Der nächste Schritt ist |_+_|. Dadurch erhalten wir Zugriff auf die |_+_| Komponente sowie alle anderen Funktionen, die wir benötigen, um unsere Partikel anzupassen. Hinter den Kulissen die |_+_| Komponente fungiert als HTLM-Canvas-Element. Wenn Sie nicht wissen, was ein Canvas-Element ist, wird es häufig für Animationen verwendet und ermöglicht Ihnen das Erstellen und Bearbeiten von Grafiken mit Javascript. Schließlich müssen wir |_+_| in unser |_+_| Datei. Jetzt sind wir am Start!

#javascript-library #css-animation #particle #reactjs #javascript

medium.com

So erstellen Sie eine Willkommensseite mit React Particles.js

Ich habe mich immer gefragt, wie Websites diese coolen, bewegenden, konstellationsähnlichen Hintergründe geschaffen haben. Nach einigem Suchen entdeckte ich React-Particles-js, eine React-ified-Version der leichtgewichtigen tsParticles-Bibliothek, die zum Erstellen von Partikeleffekten verwendet wird. tsParticles ist eine TypeScript-Bibliothek, die auf Particles.js basiert. Es bietet die gleichen Funktionen wie Particles.js, verpackt sie jedoch gut in Komponenten für einige der beliebtesten Frameworks, einschließlich der Komponente, die wir unten in unserem React-Projekt verwenden werden. In diesem Tutorial erfahren Sie, wie Sie mit React Particles.js eine Willkommensseite erstellen