tsparticles
tsParticles 3.0.2
Une bibliothèque dactylographiée légère pour créer des particules. Dépendance libre (*), navigateur prêt et compatible avec react.js, vue.js (2.x et 3.x), Angular, svelte, jQuery, Preact, Inferno, Riot.js, solide.js et composants Web
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressRéférences de documentation et de développement ici
Cette bibliothèque est disponible sur deux des CDN les plus populaires et il est facile et prêt à l'emploi, si vous utilisiez des particules.js, c'est encore plus facile .
Vous trouverez les instructions ci-dessous, avec tous les liens dont vous avez besoin, et ne pas être effrayé par TypeScript , c'est juste la langue source .
Les fichiers de sortie ne sont que JavaScript . ?
Les CDN et npm ont toutes les sources dont vous avez besoin en JavaScript , un navigateur de bundle prêt (tsparticles.engine.min.js), et tous les fichiers divisés pour la syntaxe import .
Si vous êtes intéressé, il existe des instructions simples juste en dessous pour vous guider pour migrer de l'ancienne bibliothèque de particules.js.
Veuillez utiliser ces hôtes ou les vôtres pour charger
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/firework https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all//
tparticules Confetti
moteur tsparticules
feux d'artifice
TSPARTICles BASIC
TSPARTICles minces
tsarticules
TSPARTICles tous
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; Les tsParticles importées sont la même instance que vous avez lorsque vous incluez le script dans la page à l'aide de la balise <script> .
Chargez les tsarticules et configurez les particules:
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/angularInstructions disponibles ici
astro-particlesInstructions disponibles ici
ember-tsparticlesInstructions disponibles ici
inferno-particlesInstructions disponibles ici
jquery-particlesInstructions disponibles ici
preact-particlesInstructions disponibles ici
@tsparticles/reactInstructions disponibles ici
riot-particlesVous pouvez trouver les instructions ici
solid-particlesVous pouvez trouver les instructions ici
@tsparticles/svelteInstructions disponibles ici
@tsparticles/vue2Instructions disponibles ici
@tsparticles/vue3Instruction disponible ici
web-particlesVous pouvez trouver les instructions ici
@tsparticles/wordpressLa page de plugin hébergée sur wordpress.org peut être trouvée ici
En fait, un plugin officiel de TSParticules n'existe pas, mais j'ai une collaboration avec les Premium Addons for Elementor .
Il existe des préréglages prêts à être utilisés dans ce référentiel, et ils ont également un fichier de bundle qui contient tout ce qui est nécessaire pour s'exécuter.
Ce préréglage charge de grands cercles colorés se déplaçant vers le haut sur un fond blanc.
Vous pouvez trouver les instructions ici
Ce préréglage charge des bulles colorées provenant du bas de l'écran sur un fond blanc.
Vous pouvez trouver les instructions ici
Ce préréglage charge des confettis blancs et rouges lancés à partir du centre d'écran sur un arrière-plan transparent.
Vous pouvez trouver les instructions ici
Ce préréglage charge un rouge fané à un fond noir avec des particules colorées comme des étincelles de feu et de cendres.
Vous pouvez trouver les instructions ici
Ce préréglage charge un sentier de souris à base de petites particules de décoloration comme de petites lucioles.
Vous pouvez trouver les instructions ici
Ce préréglage charge un bel effet d'artifice.
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver les instructions ici
Vous pouvez trouver des modèles liés aux TSParticules ici. Les modèles sont créés pour Vanilla JavaScript , ReactJS , Vuejs , Angular , Sveltejs et d'autres cadres.
Les modèles varieront, de nouveaux peuvent être créés ou des plus anciens mis à jour avec les dernières fonctionnalités ou changés en un meilleur style. Vérifiez-les de temps en temps.
Si vous avez créé une bonne conception avec TSParticules , n'hésitez pas à soumettre une demande de traction avec votre modèle sympa, vous serez crédité en tant qu'auteur de modèle!
https://github.com/tsparticles/templates
https://particles.js.org/sample
Vous pouvez trouver tous les tutoriels vidéo sur le site Web ici: https://particles.js.org/video.html
Plus de vidéos arrivent bientôt! Vérifiez tous les jours s'il y a de nouveaux contenus.
particles.json
Vous pouvez trouver des échantillons de configuration ici
Vous pouvez trouver toutes les options disponibles ici
J'ai créé une collection TSparticules sur Codepen? ou vous pouvez consulter mon profil
Sinon, il y a le lien de la page de démonstration ci-dessous.
Vous voulez voir encore plus de démos? Clone le référentiel sur votre ordinateur et suivez ces instructions
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startBoom! ? http: // localhost: 3000 et vous pouvez consulter d'autres démos.
Si vous êtes suffisamment courageux, vous pouvez passer à la branche dev pour essayer les fonctionnalités en cours de développement.
TSparticles a un package qui rend cette bibliothèque à 100% compatible avec la configuration Particules.js .
Sérieusement, il vous suffit de changer le script de Particles.js au paquet de compatibilité groupé, Et-Voilà, vous êtes prêt ?!
Vous pouvez en lire plus ici
Vous voulez connaître 5 raisons de faire l'interrupteur? Lire ici
Vous trouverez ci-dessous toutes les informations dont vous avez besoin pour installer les tsarticules et sa nouvelle syntaxe.
Tsparticules prend désormais en charge certaines personnalisations ?.
Vous pouvez créer vos propres plugins
Lire la suite ici ...
Organigramme TD
Core sub-graph [noyau]
moteur [moteur TSParticles]
Perlin-noise [Perlin Noise Lib]
Simplex-nise [Simplex Noise Lib]
configs [tSparticules Configs]
fin
subgraph bundle-basic [tSparticles Basic]
Sub-Graph-Movers [Movers]
Base de déplacement [base]
fin
Sous-graphes de base [formes]
Circle de forme [cercle]
fin
Sub-Graph Basic-Updates [Updaters]
Color à jour [couleur]
Updater-Opacity [Opacité]
modes de mise à jour [modes de sortie]
Mise à jour [taille]
fin
fin
moteur -> bascle
subgraph bundle-Confetti [tsparticules confetti]
Sub-Graph Confetti-Plugins [Plugins]
bouchons de plugin
motion du plugin
fin
Sous-graphes confetti-shapes [formes]
cartes de forme
forme-emoji
coeur de forme
image de forme
polon de forme
forme-carré
étoile de forme
fin
Sub-Graph Confetti-Updaters [Updaters]
mise à jour
midater-roll
Mise à jour-rotate
mise à jour
mises à jour
fin
fin
bundle-basic -> bundle-confetti
subgraph bundle-slim [tsparticules mince]
Interactions minces subgraphiques [interactions]
interactions minces subgraphiques-externes [externes]
Interaction-Extern-Attract [Attract]
interaction-external-rebond [rebond]
Interaction-externe bulle [bulle]
Interaction-External-Connect [Connect]
interaction-externe-grab [Grab]
interaction-pause externe [pause]
interaction-externe-push [push]
interaction-remi-externe [supprimer]
interaction-externe-repulse [repulse]
Interaction-external-Slow [Slow]
fin
SUBGRAPH SLIM-Interactions-particules [particules]
Interaction-praticules-Attract [Attracture]
interaction-particules-collisions [collisions]
interaction-particules-links [liens]
fin
fin
Sub-Graph Slim-Movers [Movers]
Déplacement-Parallax [parallaxe]
fin
Sub-Graph Slim-Plugins [Plugins]
Sub-Graph Slim-Plugins-Oseings [Essings]
Plugin-seasing-quad [quad]
fin
fin
Sous-graphes minces [formes]
Shape-emoji [emoji]
Image de forme [image]
ligne de forme [ligne]
forme-polygon [polygone]
forme carrée [carré]
Star-Star [étoile]
fin
Sub-Graph slim-updaters [mises à jour]
Mise à jour [vie]
Updater-rotate [Rotation]
Color à la mise à jour [Couleur de course]
fin
fin
bundle-basic -> bundle-slim
subgraph bundle-fireworks [feux d'artifice tsparticules]
Fireworks de sous-graphe-effets [effets]
trail d'effet
fin
Sous-graphiques Fireworks-Plugins [Plugins]
bouchons de plugin
Sous-graphes Fireworks-Plugin-EMITTERS-TAMES [Formes d'émetteurs]
Plugin-Emitters-Shape-Square
fin
plugin-sons
fin
Sub-Graph Fireworks-Updaters [Updaters]
Mise à jour
mise à jour
Mise à jour-rotate
fin
fin
bundle-basic -> bundle-fireworks
subgraph bundle-full [tsparticules]
interactions complètes subgraphiques [interactions]
interactions complètes subgraphiques-externes [externes]
Interaction-externe Trail [Trail]
fin
fin
Sub-Graph Plugins Full-Plugins [Plugins]
Plugin-Absorbers [Absorbants]
Plugin-Emitters [émetteurs]
Sub-Graph Full-Plugin-Emitters-Ashapes [émetteurs Domes]
Plugin-emitters-Shape-Circle [Circle]
Plugin-Emitters-Shape-Square [carré]
fin
fin
Sous-graphes complètes [Formes]
Texte de forme [texte]
fin
Sub-Graph Full-Updaters [Updaters]
Updater-Destroy [Détroyer]
updater-roll [roll]
UPDATER-TILT [TILT]
Updater-twinkle [Twinkle]
lobe de mise à jour [oscillation]
fin
fin
bundle-slim -> bundle-pleinll
subgraph bundle-all [tsparticules tout]
bundle-pJs [tsparticules Particles.js Compatibilité]
subgraph tout-effets [effets]
Effet bulle [bulle]
Effect-Trail [Trail]
fin
interactions toutes-graphiques [interactions]
sous-graphe toutes-interactions-externe [externe]
interaction-externe-particule [particule]
interaction-externe pop [pop]
fin
Light d'interaction [lumière]
Sub-Graph toutes-interactions-particules [particules]
interaction-particules-repulse [repulse]
fin
fin
subgraph all-Paths [chemins]
path-curl-nise [bruit de curl]
Curves de chemin [courbes]
PATH-PERLIN-Noise [Perlin Noise]
PATH-POLYGON [POLYGON]
path-simplex-nise [bruit simplex]
PATH-SVG [SVG]
fin
Sub-Graph All-Plugins [Plugins]
Plugin-canvas-mask [Masque Canvas]
Sub-Graph All-Plugins-Easings [Saisings]
Plugin-seasing [arrière]
Plugin-seasing-Circ [Circ]
plugin-seasing cubic [cubic]
Plugin-Seasing-Expo [Expo]
plugin-seasing-linear [linéaire]
Plugin-Seasing-Quart [Quart]
Plugin-seasing-QuinT [Quint]
Plugin-Seasing-Sine [Sine]
fin
Sub-Graph All-Plugin-Emitters-Ashapes [émetteurs Domes]
Plugin-emitters-Shape-Canvas [Canvas]
Plugin-emitters-Shape-Path [Path]
Plugin-emitters-Shape-Polygon [Polygon]
fin
Sub-Graph All-Plugins-Exports [Exports]
Plugin-Export-Image [Image]
Plugin-Export-Json [JSON]
plugin-export-video [vidéo]
fin
Plugin-HSV-Color [Couleur HSV]
Infection du plugin [Infection]
Plugin-Motion [Motion]
Plugin-Poisson-Disc [Poisson Disc]
Plugin-Polygon-masque [Masque polygone]
Plugin-Sounds [sons]
fin
toutes formes de sous-graphe [formes]
flèche de forme [flèche]
cartes de forme [cartes]
Cog de forme [COG]
coeur de forme [coeur]
Path de forme [chemin]
polygone à tour de forme [polygone arrondi]
Rect de forme [RECT RONDED]
Spiral de forme [spirale]
fin
subgraph all-updaters [mises à jour]
Gradater-gradient [Gradient]
updater-orbite [orbite]
fin
simplex-nise -> path-curl-nise
perlin-noise -> path-perlin-nise
simplex-nise -> path-simplex-noise
fin
bundle-full -> bundle-all
Un grand merci à JetBrains pour les licences open source 2020-2022!
JetBrains Webstorm est utilisé pour maintenir ce projet.
