tsparticles
tsParticles 3.0.2
Una biblioteca mecanografiada liviana para crear partículas. Free de dependencia (*), listo para el navegador y compatible con React.js, Vue.js (2.x y 3.x), Angular, Svelte, JQuery, Preact, Inferno, Riot.js, Solid.js y Web Components
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressReferencias de documentación y desarrollo aquí
Esta biblioteca está disponible en dos de los CDN más populares y es fácil y listo para usar, si estaba usando partículas.js es aún más fácil .
Encontrará las instrucciones a continuación, con todos los enlaces que necesita, y no tendrá miedo de TypeScript , es solo el lenguaje de origen .
Los archivos de salida son solo JavaScript . ?
Los CDN y npm tienen todas las fuentes que necesita en JavaScript , un navegador de paquete listo (TSParticles.engine.min.js) y todos los archivos divididos para la sintaxis import .
Si está interesado, hay algunas instrucciones simples justo debajo para guiarlo para migrar desde la biblioteca de partículas antiguas.
Utilice estos hosts o los suyos para cargar TsParticles en sus proyectos
https://unpkg.com/@tspartles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/@tssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssparty https://unpkg.com/tsparticles/ https://unpkg.com/@tspartles/all/
tsParticles confeti
motor TsParticles
fuegos artificiales TsParticles
TSPARTICOS BASIC
TsParticles Slim
TSPARTICOS
TSPARTICLES TODOS
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; Los tsParticles importados son la misma instancia que tiene cuando incluye el script en la página utilizando la etiqueta <script> .
Cargue tsParticles y configure las partículas:
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/angularInstrucciones disponibles aquí
astro-particlesInstrucciones disponibles aquí
ember-tsparticlesInstrucciones disponibles aquí
inferno-particlesInstrucciones disponibles aquí
jquery-particlesInstrucciones disponibles aquí
preact-particlesInstrucciones disponibles aquí
@tsparticles/reactInstrucciones disponibles aquí
riot-particlesPuedes encontrar las instrucciones aquí
solid-particlesPuedes encontrar las instrucciones aquí
@tsparticles/svelteInstrucciones disponibles aquí
@tsparticles/vue2Instrucciones disponibles aquí
@tsparticles/vue3Instrucción disponible aquí
web-particlesPuedes encontrar las instrucciones aquí
@tsparticles/wordpressLa página del complemento alojada en wordpress.org se puede encontrar aquí
En realidad, no es existente un complemento oficial de TSPARICLES, pero tengo una colaboración con los Premium Addons for Elementor .
Hay algunos presets listos para ser utilizados en este repositorio, y también tienen un archivo de paquete que contiene todo lo necesario para ejecutarse.
Este preajuste carece círculos de colores grandes que se mueven hacia arriba sobre un fondo blanco.
Puedes encontrar las instrucciones aquí
Este preajuste carga burbujas de colores que provienen de la parte inferior de la pantalla sobre un fondo blanco.
Puedes encontrar las instrucciones aquí
Este preestablecido carga confeti blanco y rojo lanzado desde el centro de la pantalla sobre un fondo transparente.
Puedes encontrar las instrucciones aquí
Este preajuste carga un rojo descolorido a un fondo negro con partículas de color como fuego y chispas de cenizas.
Puedes encontrar las instrucciones aquí
Este preajuste carga un rastro de ratón hecho con pequeñas partículas que se desvanecen como pequeñas luciérnagas.
Puedes encontrar las instrucciones aquí
Este preajuste carga un hermoso efecto de fuegos artificiales.
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puedes encontrar las instrucciones aquí
Puede encontrar algunas plantillas relacionadas con TsParticles aquí. Las plantillas se crean para javascript de vainilla , reactjs , vuejs , angular , sveltejs y otros marcos.
Las plantillas variarán, se pueden crear otras nuevas o más antiguas actualizadas con las últimas características o cambiaron a un mejor estilo. Compruébalos de vez en cuando.
Si creó un buen diseño con TsParticles , no dude en enviar una solicitud de extracción con su plantilla genial, ¡se le acreditará como autor de plantilla!
https://github.com/tsparticles/templates
https://particles.js.org/samples
Puede encontrar todos los tutoriales en video en el sitio web aquí: https://particles.js.org/video.html
¡Más videos llegarán pronto! Verifique todos los días si hay nuevos contenidos.
partículas.json
Puedes encontrar algunas muestras de configuración aquí
Puede encontrar todas las opciones disponibles aquí
¿He creado una colección TSParticles en CodePen? o puedes ver mi perfil
De lo contrario, está el enlace de la página de demostración a continuación.
¿Quieres ver aún más demostraciones? Clonar el repositorio en su computadora y seguir estas instrucciones
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm start¡Auge! ? http: // localhost: 3000 y puede consultar otras demostraciones.
Si es lo suficientemente valiente, puede cambiar a la rama dev para probar las características en desarrollo.
TsParticles tiene un paquete que hace que esta biblioteca sea 100% compatible con la configuración de partículas.js .
En serio, solo necesitas cambiar el script de partículas.js al paquete de compatibilidad agrupado, et-voilà, ¿ estás listo ?
Puedes leer más aquí
¿Quieres saber 5 razones para hacer el interruptor? Leer aquí
A continuación, puede encontrar toda la información que necesita para instalar TSParticles y su nueva sintaxis.
tsParticles ahora admite algunas personalizaciones?
Puedes crear tus propios complementos
Leer más aquí ...
TD de diagrama de flujo
Subgraph Core [Core]
Motor [Motor TsParticles]
Perlin-Noise [Perlin Noise lib]
Simplex-Noise [Simplex Noise lib]
Configs [TSPARTICLE CONFIGS]
fin
Subgraph Bundle-Básico [TsParticles BASIC]
Subgraph Basic-Movers [Movers]
Base de movimiento [base]
fin
Subgraph Formas básicas [formas]
círculo de forma [círculo]
fin
subgraph-actualizaciones básicas [actualizadores]
UPDUDATER-Color [Color]
Opciones de actualización [Opacidad]
modos de actualización [modos de salida]
actualizador [tamaño]
fin
fin
Motor-> Básico de paquete
Subgraph Bundle-Confetti [tsParticles confeti]
Subgraph confetti-plugins [complementos]
Emisteros de complemento
movimiento de complementos
fin
Subgraph Formas de confeti [formas]
tarjetas de forma
forma-emoji
corazón
forma de forma
Polígono de forma
cuadrado
estrella de forma
fin
subgraph confeti-updaters [actualizadores]
vida actualizada
rollo de actualización
actualizador de rotas
actualización
upble de actualizadores
fin
fin
Bundle-Básico-> Bundle-Confetti
Subgraph Bundle-Slim [TSPARTICLES SLIM]
subgraph-interacciones delgadas [interacciones]
subgraph-interacciones delgadas-externos [externos]
interacción-extracto-atracción [atraer]
Interacción-Bounce-Bounce [Bounce]
interacción-burbuja-burbuja [burbuja]
interacción-conexión-conexión [conectar]
Interacción-Corbe-Crab [Grab]
Interacción-PAUSE EXTERNAL [pausa]
interacción-external-puls [empuje]
Interacción-Remove-Remove [eliminar]
Interacción-repulso external [Repulse]
Interacción-S-Show [lento]
fin
Subgraph-interacciones delgadas-partículas [partículas]
interacción-partículas-atracción [atraer]
interacción-partículas-colisiones [colisiones]
interacción-partículas-enlaces [enlaces]
fin
fin
Subgraph Slim-Movers [Movers]
Move-Parallax [Parallax]
fin
Subgraph Slim-Plugins [complementos]
Subgraph Slim-Plugins-Feating [Easings]
Quad-quad [quad]
fin
fin
Subgraph Formas delgadas [formas]
forma-emoji [emoji]
forma de forma [imagen]
línea de forma [línea]
Forma-polygon [polígono]
Square de forma [cuadrado]
estrella de forma [estrella]
fin
Subgraph Slim-Updaters [actualizadores]
updater-life [vida]
Updater-Rotate [Rotar]
Updater-Stroke-Color [Color de carrera]
fin
fin
Básico de paquete-> Bundle-slim
Subgraph Bundle-Fireworks [Fireworks de TsParticles]
Subgraph Fireworks-efectos [Efectos]
rastreador de efectos
fin
Subgraph Fireworks-Plugins [complementos]
Emisteros de complemento
Subgraph Fireworks-Plugin-emitters-Formas [Formas de emisores]
Plugin-emitters-scape-square
fin
sondeo de complemento
fin
Subgraph Fireworks-Updaters [actualizadores]
upding-destruye
vida actualizada
actualizador de rotas
fin
fin
Bundle-Básico-> Bundle-Fireworks
Subgraph Bundle-Full [TsParticles]
Subgraph Interacciones completas [Interacciones]
Subgraph Interacciones completas-EXTERNAL [Externals]
Interacción-Trail-Trail [Trail]
fin
fin
Subgraph Full-Plugins [complementos]
Plugin-Absorbers [absorbedores]
Emisteros de complemento [emisores]
Subgraph Full-Plugin-emitters Formas [Formas de emisores]
complemento-emitters forma círculo [círculo]
plugin-emitters scape-square [cuadrado]
fin
fin
Subgraph Formas completas [formas]
Text de forma [Texto]
fin
Subgraph Full-Updaters [actualizadores]
updater-destruye [destruir]
updater-roll [rollo]
Updater-Tilt [Tilt]
Updater-Winkle [Twinkle]
updater-wobble [wobble]
fin
fin
slim de paquete-> paquete lleno
Subgraph Bundle-All [TSParticles All]
Bundle-PJS [Partículas de TsParticles.js]
Subgraph All-Effects [Efectos]
burbuja de efecto [burbuja]
Effect-Trail [sendero]
fin
Subgraph All-Interacciones [Interacciones]
Subgraph All-Interacciones-EXTERNAL [External]
interacción-partícula-partícula [partícula]
interacción-external-pop [pop]
fin
Interaction-Light [luz]
Subgraph All-Interacciones Partículas [partículas]
interacción-partículas repulse [REMPULSA]
fin
fin
Subgraph All-Paths [Paths]
ruta-curl-ruido [ruido de curl]
Curvas de ruta [curvas]
ruta-perlin-ruido [Perlin Noise]
Path-polygon [polígono]
ruta-simplex-ruido [ruido simplex]
ruta-SVG [SVG]
fin
Subgraph All-Plugins [complementos]
plugin-canvas-mask [máscara de lienzo]
Subgraph All-Plugins-Featings [Easings]
complemento-back [back]
Circuito de plugin-circt [Circ]
complemento-cúbico [cúbico]
complemento-desescado-expo [exposición]
Plugin-winging-lineal [lineal]
plugin-fisising-quart [Quart]
plugin-fisising-quint [quint]
complemento-sine [sine]
fin
Subgraph All-Plugin-emitters Formas [Formas de emisores]
Plugin-emitters forma-canvas [lienzo]
Plugin-emitters en forma [ruta]
Plugin-emitters forma-polygon [polígono]
fin
Subgraph All-Plugins-Exports [Exportaciones]
plugin-export-image [imagen]
Plugin-Export-Json [JSON]
Plugin-Export-Video [Video]
fin
Plugin-HSV-Color [HSV Color]
Infección del complemento [Infección]
complemento-movimiento [movimiento]
plugin-poisson-disco [disco Poisson]
plugin-polygon-mask [máscara de polígono]
Sounds de complemento [sonidos]
fin
Subgraph en todas las formas [formas]
Forma de forma [flecha]
tarjetas de forma [tarjetas]
COMA DE FORMA [COG]
Corazón de forma [corazón]
Path de forma [camino]
Polígono de rodaje de forma [polígono redondeado]
RECTO RODADO DE Forma [RECT redondeado]
espiral de forma [espiral]
fin
Subgraph All-Updaters [actualizadores]
actualizador-gradiente [gradiente]
upbit-órbita [órbita]
fin
Simplex-Noise-> ruta-curl-ruido
Perlin-Noise-> Path-Perlin-Noise
Simplex-Noise-> ruta-simplex-ruido
fin
Bundle-Full-> Bundle-All
¡Muchas gracias a JetBrains por las licencias de código abierto 2020-2022!
JetBrains Webstorm se utiliza para mantener este proyecto.
