tsparticles
tsParticles 3.0.2
Perpustakaan TypeScript yang ringan untuk membuat partikel. Ketergantungan gratis (*), browser siap dan kompatibel dengan react.js, vue.js (2.x dan 3.x), Angular, Svelte, JQuery, Preact, Inferno, Riot.js, Solid.js, dan komponen Web
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressDokumentasi dan referensi pengembangan di sini
Perpustakaan ini tersedia di dua CDN paling populer dan mudah dan siap digunakan, jika Anda menggunakan partikel. Js bahkan lebih mudah .
Anda akan menemukan instruksi di bawah ini, dengan semua tautan yang Anda butuhkan, dan jangan takut dengan TypeScript , itu hanya bahasa sumber .
File output hanya JavaScript . ?
CDN dan npm memiliki semua sumber yang Anda butuhkan di JavaScript , bundel browser Ready (tsparticles.engine.min.js), dan semua file yang terpecah untuk sintaks import .
Jika Anda tertarik, ada beberapa instruksi sederhana tepat di bawah ini untuk memandu Anda bermigrasi dari Perpustakaan Partikel -Partikel Lama.
Harap gunakan host ini atau sendiri untuk memuat tspartikel pada proyek Anda
https://unpkg.com/@tsparticle/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https:/unpkg.com/@tsparticlescles/basic: https:/unpkg.com/sparticles/basic/btps:/unpkg.com/sparticles https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
Tspartikel confetti
mesin tspartikel
kembang api tspartikel
Tspartikel Dasar
Tspartikel ramping
Tspartikel
Tspartikel semua
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; tsParticles yang diimpor adalah contoh yang sama yang Anda miliki saat memasukkan skrip di halaman menggunakan tag <script> .
Memuat tspartikel dan konfigurasikan 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/angularInstruksi tersedia di sini
astro-particlesInstruksi tersedia di sini
ember-tsparticlesInstruksi tersedia di sini
inferno-particlesInstruksi tersedia di sini
jquery-particlesInstruksi tersedia di sini
preact-particlesInstruksi tersedia di sini
@tsparticles/reactInstruksi tersedia di sini
riot-particlesAnda dapat menemukan instruksi di sini
solid-particlesAnda dapat menemukan instruksi di sini
@tsparticles/svelteInstruksi tersedia di sini
@tsparticles/vue2Instruksi tersedia di sini
@tsparticles/vue3Instruksi tersedia di sini
web-particlesAnda dapat menemukan instruksi di sini
@tsparticles/wordpressHalaman plugin yang di -host di wordpress.org dapat ditemukan di sini
Sebenarnya, plugin tspartikel resmi tidak ada, tetapi saya memiliki kolaborasi dengan Premium Addons for Elementor .
Ada beberapa preset yang siap digunakan dalam repositori ini, dan mereka juga memiliki file bundel yang berisi semua yang diperlukan untuk dijalankan.
Preset ini memuat lingkaran berwarna besar bergerak ke atas dengan latar belakang putih.
Anda dapat menemukan instruksi di sini
Preset ini memuat gelembung berwarna yang datang dari bagian bawah layar dengan latar belakang putih.
Anda dapat menemukan instruksi di sini
Preset ini memuat confetti putih dan merah yang diluncurkan dari pusat layar dengan latar belakang transparan.
Anda dapat menemukan instruksi di sini
Preset ini memuat merah pudar ke latar belakang hitam dengan partikel berwarna seperti api dan percikan abu.
Anda dapat menemukan instruksi di sini
Preset ini memuat jejak tikus yang dibuat dengan partikel -partikel kecil yang memudar seperti kunang -kunang kecil.
Anda dapat menemukan instruksi di sini
Preset ini memuat efek kembang api yang indah.
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan instruksi di sini
Anda dapat menemukan beberapa templat terkait tspartikel di sini. Templat dibuat untuk vanilla javascript , reactjs , vuejs , sudut , langsing , dan kerangka kerja lainnya.
Templat akan bervariasi, yang baru dapat dibuat atau yang lebih lama diperbarui dengan fitur terbaru atau diubah menjadi gaya yang lebih baik. Lihat sesekali.
Jika Anda membuat beberapa desain yang bagus dengan tspartikel , jangan ragu untuk mengirimkan permintaan tarik dengan template keren Anda, Anda akan dikreditkan sebagai penulis templat!
https://github.com/tsparticles/templates
https://particles.js.org/samples
Anda dapat menemukan semua tutorial video di situs web di sini: https://particles.js.org/video.html
Lebih banyak video akan segera hadir! Periksa setiap hari jika ada beberapa konten baru.
partikel.json
Anda dapat menemukan beberapa sampel konfigurasi di sini
Anda dapat menemukan semua opsi yang tersedia di sini
Saya telah membuat koleksi tspartikel di codepen? atau Anda dapat memeriksa profil saya
Kalau tidak, ada tautan halaman demo di bawah ini.
Ingin melihat lebih banyak demo? Kloning repositori di komputer Anda dan ikuti instruksi ini
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startLedakan! ? http: // localhost: 3000 dan Anda dapat memeriksa demo lainnya.
Jika Anda cukup berani, Anda dapat beralih ke cabang dev untuk mencoba fitur yang sedang dikembangkan.
Tspartikel memiliki paket yang membuat perpustakaan ini 100% kompatibel dengan konfigurasi partikel.js .
Serius, Anda hanya perlu mengubah skrip dari partikel .
Anda dapat membaca lebih lanjut di sini
Ingin tahu 5 alasan untuk melakukan saklar? Baca di sini
Di bawah ini Anda dapat menemukan semua informasi yang Anda butuhkan untuk menginstal tspartikel dan sintaksnya yang baru.
Tspartikel sekarang mendukung beberapa penyesuaian?
Anda dapat membuat plugin sendiri
Baca lebih lanjut di sini ...
Flowchart TD
Subgraph Core [Core]
mesin [mesin tspartikel]
Perlin-Noise [Perlin Noise Lib]
Simplex-noise [Simplex noise lib]
konfigurasi [tspartikel konfigurasi]
akhir
Subgraph Bundle-Basic [Tspartikel Basic]
Subgraph Basic-Movers [Movers]
Pindah-base [basis]
akhir
Subgraph Bentuk Dasar [Bentuk]
Bentuk-lingkaran [lingkaran]
akhir
Subgraph Basic-updates [pembaruan]
Updater-color [warna]
updater-opacity [opacity]
Mode Updater-Out [Mode Out]
Updater-ukuran [ukuran]
akhir
akhir
Mesin-> Bundle-basic
Subgraph Bundle-Confetti [tspartikel confetti]
Subgraph confetti-plugins [plugin]
Plugin-Emitters
Plugin-Motion
akhir
Subgraph confetti-shapes [bentuk]
kartu bentuk
bentuk-emoji
bentuk hati
citra bentuk
bentuk-polygon
bentuk-persegi
bentuk bintang
akhir
Subgraph confetti-updaters [pembaruan]
Updater-Life
Updater-Roll
Updater-Rotate
Updater-tilt
updater-wobble
akhir
akhir
bundle-basic-> bundel-confetti
Subgraph Bundle-Slim [Tspartikel Slim]
Subgraph-interaksi ramping [interaksi]
Subgraph Slim-Interactions-Eksternal [Eksternal]
interaksi-eksternal-atrak [menarik]
interaksi-bouncing eksternal [bouncing]
interaksi-bubble eksternal [gelembung]
interaksi-eksternal-koneksi [Connect]
interaksi-eksternal-grab [ambil]
interaksi-eksternal-jeda [jeda]
interaksi-eksternal-noda [dorong]
interaksi-eksternal-remove [hapus]
interaksi-eksternal-repulse [repulse]
interaksi-eksternal-lambat [lambat]
akhir
Subgraph-interaksi-partikel [partikel]
interaksi-partikel-pemotongan [menarik]
Partikel-Particle-Collisions [Tabrakan]
interaksi-partikel-link [tautan]
akhir
akhir
Subgraph slim-movers [penggerak]
Pindah-parallax [Parallax]
akhir
Subgraph Slim-Plugins [plugin]
Subgraph Slim-Plugins-Easings [EASING]
Plugin-Easing-Quad [Quad]
akhir
akhir
Subgraph Slim Shapes [bentuk]
bentuk-emoji [emoji]
Bentuk-gambar [gambar]
Bentuk-garis [garis]
bentuk-polygon [poligon]
bentuk-persegi [persegi]
Shape-Star [Star]
akhir
Subgraph Slim-updaters [pembaruan]
Updater-Life [Life]
Updater-Rotate [Rotate]
Updater-stroke-color [warna stroke]
akhir
akhir
bundle-basic-> bundel-slim
Subgraph Bundle-Fireworks [kembang api tspartikel]
Efek kembang api subgraph [efek]
Efek-trail
akhir
Subgraph Fireworks-Plugins [plugin]
Plugin-Emitters
Subgraph Fireworks-Plugin-Emitters Shapes [Emitters Shapes]
Plugin-Emitters-Shape-square
akhir
Sound-sound plugin
akhir
Subgraph kembang api-updaters [pembaruan]
Updater-Restroy
Updater-Life
Updater-Rotate
akhir
akhir
Bundle-Basic-> Bundle-Fireworks
Subgraph Bundle-Full [Tsparticles]
Subgraph interaksi penuh [interaksi]
Subgraph interaksi penuh-eksternal [Eksternal]
interaksi-eksternal-trail [jejak]
akhir
akhir
Subgraph Full-Plugins [plugin]
Plugin-penyerap [peredam]
Plugin-Emitters [Emitter]
Subgraph Full-Plugin-Emitters Shapes [Emitters Shapes]
Plugin-Emitters-Shape-Circle [Circle]
Plugin-Emitters-Shape-Square [Square]
akhir
akhir
Subgraph bentuk penuh [bentuk]
bentuk-teks [teks]
akhir
Subgraph-full-updaters [pembaruan]
Updater-Restroy [Destroy]
updater-roll [roll]
updater-tilt [miring]
Updater-Twinkle [Twinkle]
updater-wobble [goyangan]
akhir
akhir
bundel-slim-> bundel-penuh
Subgraph Bundle-All [tsparticles all]
Bundel-PJS [Tstartikel Partikel.js Kompatibilitas]
Subgraph All-Effects [Efek]
Efek-gelembung [gelembung]
Efek-Trail [Jejak]
akhir
Subgraph All-Interactions [Interaksi]
Subgraph all-interaksi-eksternal [eksternal]
interaksi-partikel eksternal [partikel]
interaksi-eksternal-pop [pop]
akhir
interaksi-cahaya [cahaya]
Subgraph semua-interaksi [partikel]
interaksi-partikel-repulse [repulse]
akhir
akhir
subgraph all-path [jalur]
Path-Curl-Noise [Curl Noise]
Path-Curves [kurva]
Path-Perlin-Noise [Perlin Noise]
Path-Polygon [poligon]
Path-Simplex-Noise [noise simplex]
Path-SVG [SVG]
akhir
subgraph all-plugins [plugin]
Plugin-Canvas-Mask [Canvas Mask]
Subgraph All-Plugins-Easing [EASING]
Plugin-Easing-back [Back]
Plugin-Easing-Circ [Circ]
Plugin-Easing-Cubic [kubik]
Plugin-Easing-Expo [Expo]
plugin-easing-linear [linear]
Plugin-Easing-Quart [liter]
Plugin-Easing-Quint [Quint]
Plugin-Easing-Sine [Sine]
akhir
Subgraph All-Plugin-Emitters Shapes [Bentuk Emitter]
Plugin-Emitters-Shape-Canvas [Canvas]
Plugin-Emitters-Shape-Path [Path]
Plugin-Emitters-Shape-Polygon [Polygon]
akhir
Subgraph All-Plugins-Exports [Ekspor]
Plugin-Export-Image [Image]
Plugin-Export-Json [JSON]
Plugin-Export-Video [Video]
akhir
Plugin-HSV-Color [Warna HSV]
infeksi plugin [infeksi]
Plugin-Motion [Motion]
plugin-poisson-disc [poisson disc]
Plugin-Polygon-Mask [Polygon Mask]
Sound-sound plugin [suara]
akhir
Subgraph All Shapes [Shapes]
bentuk arrow [panah]
kartu bentuk [kartu]
Bentuk-Cog [COG]
bentuk hati [hati]
Bentuk-jalan [jalur]
Bentuk-bulat-poligon [Poligon Bulat]
Rekanan Bentuk-Bentuk [Rected Rect]
bentuk-spiral [spiral]
akhir
Subgraph All-updaters [Updaters]
Updater-gradient [gradien]
Updater-Orbit [Orbit]
akhir
Simplex-noise-> path-curl-noise
Perlin-noise-> path-perlin-noise
Simplex-noise-> path-simplex-noise
akhir
bundel-penuh-> bundel-semua
Terima kasih banyak kepada JetBrains untuk lisensi open source 2020-2022!
JetBrains Webstorm digunakan untuk mempertahankan proyek ini.
