tsparticles
tsParticles 3.0.2
Uma biblioteca de texto leve leve para criar partículas. Livre de dependência (*), navegador pronto e compatível com o react.js, vue.js (2.x e 3.x), angular, esbelto, jQuery, pré -ct, inferno, riot.js, sólido.js e componentes da web
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressDocumentação e referências de desenvolvimento aqui
Esta biblioteca está disponível em dois dos CDNs mais populares e é fácil e pronto para usar, se você estava usando partículas.js é ainda mais fácil .
Você encontrará as instruções abaixo, com todos os links necessários, e não terá medo do TypeScript , é apenas o idioma de origem .
Os arquivos de saída são apenas JavaScript . ?
CDNs e npm têm todas as fontes que você precisa no JavaScript , um navegador de pacote pronto (tsparticles.engine.min.js) e todos os arquivos divididos para sintaxe import .
Se você estiver interessado, existem algumas instruções simples logo abaixo para orientá -lo a migrar da biblioteca antiga partículas.js.
Por favor, use esses hosts ou seus próprios para carregar TSpartics em seus projetos
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/@tsparticles/slim/ https://unpkg.com/tsparicles/ https://unpkg.com/@tsparicles/all/l
TSPATICICIS CONSETTI
Motor de TSpartics
TSPARCIAS FIREWORKS
TSPATICIS BASIC
TSPATICIS Slim
TSPATICIS
TSPARTICIS TODAS
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; As tsParticles importadas são a mesma instância que você possui ao incluir o script na página usando a tag <script> .
Carregue tsparticles e configure as 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/angularInstruções disponíveis aqui
astro-particlesInstruções disponíveis aqui
ember-tsparticlesInstruções disponíveis aqui
inferno-particlesInstruções disponíveis aqui
jquery-particlesInstruções disponíveis aqui
preact-particlesInstruções disponíveis aqui
@tsparticles/reactInstruções disponíveis aqui
riot-particlesVocê pode encontrar as instruções aqui
solid-particlesVocê pode encontrar as instruções aqui
@tsparticles/svelteInstruções disponíveis aqui
@tsparticles/vue2Instruções disponíveis aqui
@tsparticles/vue3Instrução disponível aqui
web-particlesVocê pode encontrar as instruções aqui
@tsparticles/wordpressA página do plug -in hospedada no wordpress.org pode ser encontrada aqui
Na verdade, um plug -in oficial de tssparticles não existe, mas tenho uma colaboração com os Premium Addons for Elementor .
Existem algumas predefinições prontas para serem usadas neste repositório e elas também possuem um arquivo de pacote que contém tudo o que é necessário para executar.
Este predefinido carrega grandes círculos de cor, movendo -se para cima em um fundo branco.
Você pode encontrar as instruções aqui
Esta predefinição carrega bolhas coloridas provenientes da parte inferior da tela em um fundo branco.
Você pode encontrar as instruções aqui
Esta predefinição carrega confetes brancos e vermelhos lançados no centro de tela em um fundo transparente.
Você pode encontrar as instruções aqui
Esta predefinição carrega um vermelho desbotado em um fundo preto com partículas coloridas como faíscas de fogo e cinzas.
Você pode encontrar as instruções aqui
Esta predefinição carrega uma trilha de mouse feita com pequenas partículas desbotadas como pequenos vaga -lumes.
Você pode encontrar as instruções aqui
Essa predefinição carrega um belo efeito de fogos de artifício.
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar as instruções aqui
Você pode encontrar alguns modelos relacionados às telas aqui. Os modelos são criados para JavaScript de baunilha , ReactJs , Vuejs , Angular , Sveltejs e outras estruturas.
Os modelos variam, novos podem ser criados ou mais antigos atualizados com os recursos mais recentes ou alterados para um estilo melhor. Verifique -os de vez em quando.
Se você criou um bom design com telas, sinta -se à vontade para enviar uma solicitação de tração com seu modelo legal, você será creditado como o autor do modelo!
https://github.com/tsparicles/templates
https://particles.js.org/samples
Você pode encontrar todos os tutoriais em vídeo no site aqui: https://particles.js.org/video.html
Mais vídeos estão chegando em breve! Verifique todos os dias se houver algum novo conteúdo.
partículas.json
Você pode encontrar algumas amostras de configuração aqui
Você pode encontrar todas as opções disponíveis aqui
Eu criei uma coleção de tspartics no Codepen? ou você pode conferir meu perfil
Caso contrário, há o link da página de demonstração abaixo.
Quer ver ainda mais demos? Clone o repositório no seu computador e siga estas instruções
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startBOOM! ? http: // localhost: 3000 e você pode conferir outras demos.
Se você é corajoso o suficiente, poderá mudar para a filial dev para experimentar os recursos em desenvolvimento.
As TSParticles possuem um pacote que torna esta biblioteca 100% compatível com a configuração do Partles.js .
Sério, você só precisa alterar o script de Partles.js para o pacote de compatibilidade em pacote, Et-Voilà, você está pronto ?!
Você pode ler mais aqui
Deseja saber 5 razões para fazer o interruptor? Leia aqui
Abaixo, você pode encontrar todas as informações necessárias para instalar tsparticles e sua nova sintaxe.
TSPATICICES agora suporta algumas personalizações?
Você pode criar seus próprios plugins
Leia mais aqui ...
Fluxograma TD
Subgraph Core [núcleo]
Motor [TSPATICICLES MOTOR]
Perlin-ruivo [Perlin ruído lib]
Simplex-ruivo [Simplex ruído lib]
Configs [TSPATICICCES ENFIGS]
fim
Bundle-Basic de subgraf
Subgraff-Movers [Movers]
mover-base [base]
fim
Subgraff-Formas Básicas [Shapes]
círculo de forma [círculo]
fim
Sub-atualizadores básicos [atualizadores]
Updater-Color [cor]
Updater-Opacity [Opacity]
Modos de Updater-Out [Modos Out]
Size de tamanho atualizado [tamanho]
fim
fim
Motor-> Bundle-Basic
subgraff pacote-confetti [tsparticles confetti]
SUB-PLUGINS DE CONFETTIONS [Plugins]
Plugin-Emitores
Plugin-Motion
fim
SUB-GRAPH-CONSETTI-FOES [SHAPES]
cartões de forma
Shape-emji
Coração de forma
imagem de forma
Shape-Polgon
quadrado de forma
Shape-star
fim
Updaters de confete de sub-regra [atualizadores]
Updater-Life
Updater-roll
Updater-Rotate
Updater-tilt
Updater-wobble
fim
fim
Bundle-Basic-> Bundle-Confetti
Pacote de subgrafias-Slim [TSParticles Slim]
Sub-interna-interações [interações]
Sub-interna-interações Slim-External [Externos]
Interação-External-ATRATTE [ATRAT]
Interação-Bounce [Bounce]
interação-bubble [bolha]
Interação-Connect-Connect [Connect]
Interação-Grab [Grab]
PAUSA EXTERNAL-EXTERNO [pausa]
Interação-push [push]
Remove-remendo interação-external [Remover]
REPULSE EXTERNAL-EXTERNAL [REPULSE]
Interação-llow External [lento]
fim
Sub-interna-interna-partículas [partículas]
Interação-Particles-ATRATTE [ATRAT]
Colisões de interação-partículas [colisões]
Links de interação-partículas [links]
fim
fim
Sub-Movers Slim-Movers [Movers]
mover-parallax [paralaxe]
fim
Sub-plugins Slim-Plugins [Plugins]
Sub-eases de Slim-Plugins [Easings]
Quad-Quad de plug-in [Quad]
fim
fim
Subgraffs Slim-Formas [Shapes]
Shape-emji [emoji]
Imagem de forma [imagem]
linha de forma [linha]
Shape-Polgon [Polígono]
quadrado [quadrado]
Shape-Star [estrela]
fim
Sub-atualizadores Slim-Upders [atualizadores]
Updater-Life [vida]
Updater-Rotate [Girar]
Updater-Stroke-Color [cor do golpe]
fim
fim
Bundle-Basic-> Bundle-Slim
Bundle-Fireworks de subgrafias [TSPATICICIS FIREWORKS]
Efeitos de fogos de artifício do subgrafol [efeitos]
EFEITO-RAIL
fim
Subgraph Fireworks-Plugins [Plugins]
Plugin-Emitores
Subgrafias Fireworks-Plugin-Emitters-Shapes [Emitters Shapes]
Plugin-EMITTERS Square
fim
Plug-in-soms
fim
Subgraph Fireworks-updaters [atualizadores]
Updater-Destroy
Updater-Life
Updater-Rotate
fim
fim
Bundle-Basic-> Bundle-Fireworks
Pacote de subgraff-Full [TSPATICICLES]
Sub-interna-interações [interações]
Sub-interna-interações completas-External [Externos]
Interação-rei-rei [trilha]
fim
fim
Sub-plugins completos [plugins]
plug-in-absors [absorvedores]
Emissores de Plugin-Emitores [Emissores]
Sub-plugina-plugin-emputores [Shapes emitores]
Círculo de forma de plug-in-emputores [círculo]
quadrado-quadrado em formidores de plug-in [quadrado]
fim
fim
Subgraff-Fipes [Shapes]
Texto da forma [texto]
fim
Atualizadores completos do subgrafol [atualizadores]
Updater-Destroy [Destroy]
Updater-roll [roll]
Updater-Tilt [Tilt]
Updater-Twinkle [Twinkle]
Updater-Wobble [WOBBLE]
fim
fim
pacote-slim-> pacote-cheio
Bundle-All Subgraph [TSPARCIAS ALL]
Puntle-PJs [TSPATICICIS parttles.js Compatibilidade]
Sub-efeitos de todos os efeitos [efeitos]
Bubble de efeito [bolha]
Trail [trilha] de efeito [trilha]
fim
All-Interactions do Sub-Agrafado [Interações]
Sub-interna-interações-External [Externo]
interação-parte-partícula [partícula]
Interação-pop [pop]
fim
Luz de interação [luz]
Subgrafias All-Interactions-Partículas [partículas]
Interação-Partículas-Repulse [Repulse]
fim
fim
Subgrafias All-Paths [Caminhos]
Path-Curl noise [ruído de cacho]
Curvas de caminho [curvas]
Path-Perlin noise [ruído perlin]
POLY-POLYGON [POLIGON]
Path-Simplex-Noise [Simplex Ruído]
PATH-SVG [SVG]
fim
Sub-plugins [plugins]
plugin-canvas-mask [máscara de tela]
Subgraph All-Plugins-Easings [Easings]
plug-in -ing-back [traseiro]
Circ-CIRC de plug-in [Circ]
plug-in-meio cúbico [cúbico]
plug-in-meio-expo [expo]
linear-linear dos plug-in [linear]
Quarto-plug-in [Quart]
plug-in-meio-quint [quint]
Sine-Sine-Sine [seno]
fim
Sub-plugina-emputores-empos
Plugin-EMITTERS-SHAPE-CANVAS [CANVAS]
Plugin-EMITTERS-SHAPE-PATH [PATH]
plug-in-Emitores-Shape-Polygon [polígono]
fim
SUB-PLUGINS-EXPORTS [Exportações]
plugin-export-image [imagem]
plugin-export-json [JSON]
plugin-export-video [vídeo]
fim
Plugin-HSV-Color [cor HSV]
Infecção por plug-in [infecção]
Plugin-Motion [movimento]
Plugin-Poisson-Disc [disco Poisson]
Plugin-Polygon-mask [máscara de polígono]
Plug-in-soms [sons]
fim
Subgrafias em todas as formas [Shapes]
seta de forma [seta]
Shap-cartards [cartões]
Cão de formas [COG]
coração-coração [coração]
Patinho de forma [PATH]
Poligono-de-forma-renda [polígono arredondado]
Shape-Rect-Rect [Rect arredondado]
Shape-Spiral [Spiral]
fim
Sub-atualizadores do Sub-Atualizadores [atualizadores]
gradiente de atualizador [gradiente]
Updater-Orbit [Orbit]
fim
Simplex-noise-> Path-Curl-Noise
perlin-ruins-> Path-Perlin-noise
Simplex-noise-> path-simplex-noise
fim
pacote-cheio-> pacote-tudo
Muito obrigado ao JetBrains pelas licenças de código aberto 2020-2022!
O JetBrains Webstorm é usado para manter este projeto.
