tsparticles
tsParticles 3.0.2
Eine leichte Typskriptbibliothek zum Erstellen von Partikeln. Abhängigkeit frei (*), Browser bereit und kompatibel mit React.js, Vue.js (2.x und 3.x), Angular, Suflte, JQuery, Preact, Inferno, Riot.js, Solid.js und Webkomponenten
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressDokumentation und Entwicklungsreferenzen hier
Diese Bibliothek ist auf zwei der beliebtesten CDNs erhältlich und ist einfach und bereit zu verwenden. Wenn Sie Partikel verwendet haben. Js ist noch einfacher .
Sie finden die folgenden Anweisungen mit allen Links, die Sie benötigen, und haben Sie nicht nach Typscript , es ist nur die Quellsprache .
Die Ausgabedateien sind nur JavaScript . ?
CDNs und npm verfügen über alle Quellen, die Sie in JavaScript , einem Bündelbrowser -Ready (tSparticles.engine.min.js) und allen für import aufgeteilten Dateien benötigen.
Wenn Sie interessiert sind, finden Sie einige einfache Anweisungen direkt unten, um Sie von der alten Partikel -Js -Bibliothek zu migrieren.
Bitte verwenden Sie diese Hosts oder Ihre eigenen, um TSPartikel für Ihre Projekte zu laden
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
TSparticles Confetti
TSparticles Engine
Tspartikel Feuerwerk
TSpartikel grundlegend
TSpartikel schlank
tspartikel
tspartikel alle
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; Die importierten tsParticles sind dieselbe Instanz, die Sie bei der Einbeziehung des Skripts in der Seite mithilfe des <script> -Tags haben.
Laden Sie TSPartikel und konfigurieren Sie die Partikel:
index.html
< div id =" tsparticles " > </ div >
< script src =" tsparticles.engine.min.js " > </ script >app.js
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
. load ( {
id : "tsparticles" ,
url : "presets/default.json" ,
} )
. then ( container => {
console . log ( "callback - tsparticles config loaded" ) ;
} )
. catch ( error => {
console . error ( error ) ;
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : {
/* options here */
} ,
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
} ) ;
//random object
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
index : 1 ,
} ) ; //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles . setOnClickHandler ( ( event , particles ) => {
/* custom on click handler */
} ) ;
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles . domItem ( 0 ) ;
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles . play ( ) ;
// pause will stop the animations
particles . pause ( ) ; @tsparticles/angularAnweisungen hier verfügbar
astro-particlesAnweisungen hier verfügbar
ember-tsparticlesAnweisungen hier verfügbar
inferno-particlesAnweisungen hier verfügbar
jquery-particlesAnweisungen hier verfügbar
preact-particlesAnweisungen hier verfügbar
@tsparticles/reactAnweisungen hier verfügbar
riot-particlesHier finden Sie die Anweisungen
solid-particlesHier finden Sie die Anweisungen
@tsparticles/svelteAnweisungen hier verfügbar
@tsparticles/vue2Anweisungen hier verfügbar
@tsparticles/vue3Anweisung hier verfügbar
web-particlesHier finden Sie die Anweisungen
@tsparticles/wordpressDie auf WordPress.org gehostete Plugin -Seite finden Sie hier
Tatsächlich gibt es kein offizielles TSparticles -Plugin, aber ich habe eine Zusammenarbeit mit den Premium Addons for Elementor -Plugin -Sammlung.
Es gibt einige Voreinstellungen, die in diesem Repository verwendet werden können, und sie verfügen auch über eine Bundle -Datei, die alles enthält, was zum Ausführen erforderlich ist.
Dieses voreingestellte lädt große farbige Kreise, die sich auf einem weißen Hintergrund nach oben bewegen.
Hier finden Sie die Anweisungen
Dieses voreingestellte lastete farbige Blasen, die vom unteren Bildschirm unter weißem Hintergrund kommen.
Hier finden Sie die Anweisungen
Dieses voreingestellte lädt weiße und rote Konfetti, das auf einem transparenten Hintergrund aus dem Bildschirmzentrum gestartet wurde.
Hier finden Sie die Anweisungen
Dieses voreingestellte lädt einen verblassten Rot auf einen schwarzen Hintergrund mit Partikeln wie Feuer und Asche -Funken.
Hier finden Sie die Anweisungen
Dieses voreingestellte lädt einen Mausweg mit kleinen verblassenden Partikeln wie kleinen Glühwürmchen.
Hier finden Sie die Anweisungen
Dieses voreingestellte lädt einen schönen Feuerwerkseffekt.
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie die Anweisungen
Hier finden Sie einige TSPartikel -verwandte Vorlagen. Die Vorlagen werden für Vanille -JavaScript , Reactjs , VueJs , Angular , Sveltejs und andere Frameworks erstellt.
Die Vorlagen variieren, neue oder ältere, die mit den neuesten Funktionen aktualisiert oder in einen besseren Stil geändert werden. Probieren Sie sie ab und zu an.
Wenn Sie ein gutes Design mit TSparticeln erstellt haben, können Sie eine Pull -Anfrage mit Ihrer coolen Vorlage abgeben, Sie werden als Vorlagenautor gutgeschrieben!
https://github.com/tsparticles/templates
https://particles.js.org/samples
Hier finden Sie alle Video -Tutorials auf der Website: https://particles.js.org/video.html
Weitere Videos kommen bald! Überprüfen Sie jeden Tag, ob es einige neue Inhalte gibt.
Partikel.json
Hier finden Sie einige Konfigurationsmuster
Hier finden Sie alle verfügbaren Optionen
Ich habe eine TSparticles -Sammlung auf CodePen erstellt? Oder Sie können mein Profil überprüfen
Andernfalls finden Sie den Demo -Seite -Link unten.
Möchten Sie noch mehr Demos sehen? Klonen Sie das Repository auf Ihrem Computer und befolgen Sie diese Anweisungen
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startBoom! ? http: // localhost: 3000 und Sie können sich andere Demos ansehen.
Wenn Sie mutig genug sind, können Sie zum dev wechseln, um die in der Entwicklung befindlichen Funktionen auszuprobieren.
TSparticles verfügt über ein Paket, das diese Bibliothek zu 100% kompatibel mit der Konfiguration der Partikel.JS -Konfiguration macht.
Im Ernst, Sie müssen nur das Skript von Partikeln wechseln.js in das gebündelte Kompatibilitätspaket, et-voilà, Sie sind bereit ?!
Sie können hier mehr lesen
Möchten Sie 5 Gründe kennen, um den Wechsel durchzuführen? Lesen Sie hier
Im Folgenden finden Sie alle Informationen, die Sie für die Installation von TSparticles und der neuen Syntax benötigen.
TSpartikel unterstützt jetzt einige Anpassungen?
Sie können Ihre eigenen Plugins erstellen
Lesen Sie hier mehr ...
Flussdiagramm TD
Subgraph Core [Kern]
Motor [TSparticles Engine]
Perlin-Noise [Perlin Noise Lib]
Simplex-Noise [Simplex Noise Lib]
configs [tSparticles configs]
Ende
Subgraph Bündel-Basic [TSparticles Basic]
Subgraph Basic-Movers [Umzugsunternehmen]
Bewegungsbasis [Basis]
Ende
Subgraph-Basic-Form [Formen]
Formkreis [Kreis]
Ende
Subgraph Basic-Updates [Updaters]
Updater-Color [Farbe]
Updateroptazität [Opazität]
Updater-out-Modes [Out Modi]
Updater-Größe [Größe]
Ende
Ende
Motor-> Bundle-Basic
Subgraph Bundle-Confetti [TSparticles Confetti]
Subgraph Confetti-Plugins [Plugins]
Plugin-Emitter
Plugin-Motion
Ende
Subgraph Confetti-Shapes [Formen]
Formkarten
Form-Emoji
Form-Herz
Form-Image
Formpolygon
Formquadrat
Formstar
Ende
Subgraph Confetti-Updaters [Updaters]
Updater-Leben
Updater-Roll
Updater-rotate
Updater-Tilt
Updater-Wobble
Ende
Ende
Bündel-Basic-> Bundle-Confetti
Subgraph Bundle-Slim [TSparticles Slim]
Subgraph Slim Interactions [Wechselwirkungen]
Subgraph Slim Interactions-External [Externale]
Interaktions-externer Attrakt [anziehen]
Interaktions-external-Bounce [Bounce]
Interaktions-externer Bubble [Blase]
Interaktions-externe Konnect [Connect]
Interaktions-externaler Grab [Grab]
Interaktions-externe Pause [Pause]
Interaktions-External-Push [Push]
Interaktions-externer Remove [entfernen]
Interaktions-externe Repulse [Repulse]
Interaktions-externaler Slow [Slow]
Ende
Subgraph Slim Interactions-Particles [Partikel]
Interaktionspartikel-Attraction [anziehen]
Interaktionspartikelkollisionen [Kollisionen]
Interaktionspartikelverbindungen [Links]
Ende
Ende
Subgraph Slim-Movers [Umzugsunternehmen]
Move-Parallax [Parallaxe]
Ende
Subgraph Slim-Plugins [Plugins]
Subgraph Slim-Plugins-Osting [Asseming]
Plugin-ash-Quad [Quad]
Ende
Ende
Subgraph Slim-Form [Formen]
Form-Emoji [Emoji]
Form-Image [Bild]
Formlinie [Linie]
Formpolygon [Polygon]
Formquadrat [Quadrat]
Formstar [Star]
Ende
Subgraph Slim-Updaters [Updaters]
Updater-Leben [Leben]
Updater-rotate [Drehen]
Updater-Stroke-Color [Schlaganfallfarbe]
Ende
Ende
Bündel-Basic-> Bundle-Slim
Subgraph Bundle-Fireworks [TSparticles Fireworks]
Subgraph-Feuerwerkskörpern [Effekte]
Effekt
Ende
Subgraph Fireworks-Plugins [Plugins]
Plugin-Emitter
Subgraph-Feuerwerks-Plugin-Emitter-Form [Emitter Formen]
Plugin-Emitter-Form-Quadrat
Ende
Plugin-Sounds
Ende
Subgraph Fireworks-Updaters [Updaters]
Updater-Zerstörer
Updater-Leben
Updater-rotate
Ende
Ende
Bündel-Basic-> Bundle-Fireworks
Subgraph Bundle-voll [TSparticles]
Subgraph Vollinteraktionen [Wechselwirkungen]
Subgraph Vollinteraktionen-externe [externe]
Interaktions-External-Trail [Trail]
Ende
Ende
Subgraph Full-Plugins [Plugins]
Plugin-Absorber [Absorber]
Plugin-Emitter [Emitter]
Subgraph Full-Plugin-Emitter-Form [Emittersformen]
Plugin-Emitter-Form-Kreis [Kreis]
Plugin-Emitter-Form-Square [Quadrat]
Ende
Ende
Subgraph Full-forces [Formen]
Formtext [Text]
Ende
Subgraph Full-Updaters [Updaters]
Updater-Zerstörer [Zerstören]
Updater-Roll [Roll]
Updater-Tilt [Tilt]
Updater-Twinkle [Twinkle]
Updater-Wobble [Wobble]
Ende
Ende
Bündel-Slim-> Bündel
Subgraph Bundle-All [TSparticles alle]
Bündel-PJS [TSparticles Partikel.js Kompatibilität]
Subgraph All-Effects [Effekte]
Effect-Bubble [Blase]
Effect-Trail [Trail]
Ende
Subgraph-All-Interaktionen [Wechselwirkungen]
Subgraph Allein Interactions-External [extern]
Interaktions-External-Partikel [Partikel]
Interaktions-external-Pop [POP]
Ende
Interaktionslicht [Licht]
Subgraph All-Interactions-Partikel [Partikel]
Interaktionspartikel-Repulse [Repulse]
Ende
Ende
Subgraph Allpaden [Pfade]
Pfad-curl-noise [Curl-Rauschen]
Pfadkollegen [Kurven]
Pfad-Perlin-Noise [Perlin Rauschen]
Pfad-Polygon [Polygon]
Pfad-Simplex-Noise [Simplex Noise]
Path-SVG [SVG]
Ende
Subgraph All-Plugins [Plugins]
Plugin-Canvas-Maske [Leinwandmaske]
Subgraph All-Plugins-Osting [Asseming]
Rückschläge [zurück]
Plugin-ashing-circ [Circ]
Plugin-ashing-kubisch [kubisch]
Plugin-ash-expo [Expo]
Plugin-ashing-linear [linear]
Plugin-ash-öses-Quart [Quart]
Plugin-ash-Quint [Quint]
Plugin-ashing-Sine [Sinus]
Ende
Subgraph All-Plugin-Emitter-Form [Emittersformen]
Plugin-Emitter-Form-Canvas [Leinwand]
Plugin-Emitter-Formpfad [Pfad]
Plugin-Emitter-Form-Polygon [Polygon]
Ende
Subgraph All-Plugins-Exports [Exporte]
Plugin-Export-Image [Bild]
Plugin-Export-Json [JSON]
Plugin-export-video [Video]
Ende
Plugin-HSV-Color [HSV-Farbe]
Plugin-Infektion [Infektion]
Plugin-Motion [Bewegung]
Plugin-Poisson-Disc [Poisson Disc]
Plugin-Polygon-Maske [Polygonmaske]
Plugin-Sounds [Sounds]
Ende
Subgraph All-Form [Formen]
Form-Arrow [Pfeil]
Formkarten [Karten]
Formkog [COG]
Formherz [Herz]
Formpfad [Pfad]
Form-Rund-Polygon [Rundes Polygon]
Form-Rund-Trekt [abgerundetem Rekt]
Form-Spiral [Spirale]
Ende
Subgraph All-Updaters [Updaters]
Updater-Gradient [Gradient]
Updater-Orbit [Orbit]
Ende
simplex-noise-> path-curl-noise
Perlin-Noise-> Pfad-Perlin-Noise
Simplex-Noise-> Pfad-Simplex-Noise
Ende
Bündel-voll-> Bündel
Vielen Dank an JetBrains für die Open-Source-Lizenzen 2020-2022!
JetBrains Webstorm wird verwendet, um dieses Projekt aufrechtzuerhalten.
