tsParticles - Deeltjes in TypeScript

Een lichte TypeScript bibliotheek voor het maken van deeltjes. Zonder afhankelijkheden (*) en bruikbaar in de browser!

Particles.js omgezet in TypeScript, vrij van afhankelijkheden (*), verbeterd met nieuwe, coole 😎 features en verschillende bugs gefixt en ** het wordt actief onderhouden**!

Wil je dit gebruiken op je website?

Deze bibliotheek is beschikbaar op de twee meest populaire CDN's en het is makkelijk en klaar voor gebruik. Als je particles.js gebruikte, is het nog makkelijker.

Je vindt de instructies hier onder met alle links die je nodig hebt, en wees niet bang voor TypeScript, het is alleen maar de bron taal.

De uitvoerbestanden zijn alleen maar JavaScript. 🤩

CDN's en npm hebben alle bronnen die je nodig hebt in JavaScript Javascript, een bundel klaar voor de browser ( tsparticles.min.js) en alle bestanden gesplit voor de import syntaxis.

Als je nog geïnteresseerd bent staan er hier onder wat instructies voor het migreren van de oude particles.js bibliotheek.

Bibliotheek installatie

Hosting / CDN

Gebruik deze hosts of je eigen om tsParticles te laden in je projecten

jsDelivr

cdnjs

unpkg

https://unpkg.com/tsparticles/

npm

npm install tsparticles

yarn

yarn add tsparticles

Import en require

Beginnend met versie 1.12.11 kunnen import en require gebruikt worden om tsParticles te importeren.

Nu kun je iets schrijven als volgt:

const tsParticles = require("tsparticles");

// of

import {tsParticles} from "tsparticles";

De geïmporteerde tsParticles is dezelfde instantie als wanneer je het script had gebruikt van een CDN.

NuGet

Usage

Laad tsParticles en configureer de deeltjes:

index.html

<div id="tsparticles"></div>

<script src="tsparticles.min.js"></script>

app.js

// @path-json kan een object of een array zijn, de eerste wordt direct geladen, het object uit de array wordt willekeurig gekozen
/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */

tsParticles
    .loadJSON("tsparticles", "presets/default.json")
    .then((container) => {
        console.log("callback - tsparticles config loaded");
    })
    .catch((error) => {
        console.error(error);
    });

// of

/* tsParticles.load(@dom-id, @options); */

tsParticles.load("tsparticles", {
    /* opties hier */
});

// of

/* tsParticles.loadFromArray(@dom-id, @options, @index (optioneel)); */

tsParticles.loadFromArray("tsparticles", [
    {
        /* opties hier */
    },
    {
        /* andere opties hier */
    },
]);
// willekeurig object

tsParticles.loadFromArray(
    "tsparticles",
    [
        {
            /* opties hier */
        },
        {
            /* andere opties hier */
        },
    ],
    1
); // de tweede
// Belangrijk! Als de index niet in de reeks 0...<array.length> zit, dan wordt de index genereerd.

// Na initializatie kan dit worden gebruikt.

/* tsParticles.setOnClickHandler(@callback); */

/* Dit wordt afgevuurd na alle deeltjes geladen zijn */

tsParticles.setOnClickHandler((event, particles) => {
    /* Eigen gemaakte klik handler */
});

// Nu kan je de animaties ook besturen, het is mogelijk om de animaties te pauzeren en weer door te laten gaan
// Deze methodes veranderen niet de configuratie niet dus hier zit je veilig mee
// domItem(0) geeft de eerste tsParticle instantie terug die geladen is in de DOM
const particles = tsParticles.domItem(0);

// play start de animaties, als de move niet aan staat wordt dit niet aangezet, alleen het frame wordt geüpdated
particles.play();

// pause stopt de animaties
particles.pause();